I have a login page with two fields:
<select id="operatore" name="operator">
<option disabled selected>Operator</option>
<option>John</option>
<option>Jennifer</option>
<option>Carl</option>
</select>
<input type="password" placeholder="Password" id="search_field" readonly>
I want that all the text appears centred. In Firefox all works fine. But in Chrome the written "Operator" appears on the left, even if the style inspector doesn't cancel the style, as you can see from the image:
In the native app for surf the net in Samsung Tablet, the written "Operator" appears centered, but the placeholder "password" appears on the left. Why? How can I fix all these problems?
HERE is the full CODE.
you can give it a text indent like text-indent: 40px;this won't make it aligned center but it will move it to the middle
and by the way there is a better way of making a placeholder for the select
<option style="display: none;" value="">Operator</option>
this way it won't show up in the drop-down
Taken from: Is it possible to center text in select box?
I'm afraid this isn't possible with plain CSS, and won't be possible to make completely cross-browser compatible.
However, using a jQuery plugin, you could style the dropdown:
http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/
This plugin hides the select element, and creates span elements etc on the fly to display a custom drop down list style. I'm quite confident you'd be able to change the styles on the spans etc to center align the items.
Ok, I believe I have fixed your Operator problem.
Here is the slightly changed code.
form input {/*ADDED*/
width: 250px;
}
form input, #operatore {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
border-radius: 3px;
padding: 10px 15px;
margin: 0 auto 10px auto;
padding-left: 90px;/*ADDED*/
padding-right: 80px;/*ADDED*/
/*TOOK AWAY width: 250px; PROPERTY*/
display: block;
text-align: center;
font-size: 18px;
color: white;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
font-weight: 300;
}
For some odd reason in Chrome the selector form input, #operatore is disabling any other changes made to (form) selector, option. Moreover if I were to add an extra selector, for example: #operatore {someCSS}, the (selector) form input, #operatore would STILL take precedence over that selector and I also used !important. Anyway you will have to align the text manually using padding-left and padding-right.
You can't really customise <select> or <option> much. The only way (cross-browser) would be to manually create a drop down with divs and css/js to create something similar.
Related
Got a nice menu with rounded buttons, and I want to style the dropdown list the same way. Tried a lot of different things but there is two things I need some help with:
1. rounded corners like the rest of the buttons.
2. get a solid color, and not that animated look.
Here is a picture showing the buttons and the dropdown:
Here is the styling on the list:
#topNav .right #categoryButton {
margin-top:5px;
border:3px solid #fff;
background-color:#303030 ;
text-transform:uppercase;
color: #fff;
height:50px;
width:220px;
outline: none;
}
Check out this great article about styling a select dropdown. There are limitations however and some older browsers will render the select box its own way.
It basically involves wrapping the select in a div and styling the div:
.styled-select select {
background: transparent;
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
}
.styled-select {
width: 240px;
height: 34px;
overflow: hidden;
background: url(new_arrow.png) no-repeat right #ddd;
border: 1px solid #ccc;
}
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>
You can't do that. You have to build your own select element.
From this article discussing "What if you want complete design control?"
First, try everything you
can to make that not necessary. Default form elements are familiar and
work well. Making a dropdown menu match the font and colors of your
brand isn't usually necessary and is more likely obnoxious at best and
bad UX at worst.
If you decide that it's absolutely a good idea to customize a
dropdown, then you should use JavaScript to:
Accessibly hide the original select.
Rebuild the select with custom
markup (probably a definition list), that you style how you want.
Replicate all the functionality that default selects have, which
include: keyboard events like up and down arrow keys and return to
select, scrolling of long lists, opening the menu upwards when select
is against bottom of screen, to name a few.
There's a few more steps to accommodate different client setups and a tutorial linked for more information.
How do I render a normal (enabled-looking) button, via HTML/CSS, which doesn't change its appearance upon mouse over or mouse down (for illustration purposes e.g. Press [x] to cancel)?
(i.e. I don't want it to become "highlighted" or "pushed" when you hover the mouse over it or "press" it.)
I know I can use a picture of the button, but under different or future versions of browsers the subsequent real buttons may look different and not match the picture, which is why I'm looking to render it via HTML/CSS.
Maybe you can consider placing an empty <div> with a specified width and height overlapping the button, which will occlude the click on the button?
Depending the positioning modes of your outer elements, you can use the <div> to cover some outer element, or just the <input type="button" ...> itself (in which case JavaScript and DOM can be helpful to determine the actual size of the button and thus the coverage area).
#Navigeteur
just take a screenshot of a normal button and save it as bmp or png image
and render the image instead of button :)
The disabled attribute is supported in all major browsers, so you could use that.
<button type="button" disabled>Click Me!</button>
or, alternatively:
<input type="button" value="Click Me!" disabled />
To make it look like it's enabled, you could then edit its CSS properties for it's disabled state:
input[type="button"]:disabled, button[type="button"]:disabled {
background:#DDD;
color:#000;
}
But, as OP pointed out, this can make it appear completely different to what other buttons look like on certain browsers/systems. You could omit the background property in the CSS rule and they would render as any other disabled buttons, but with font color like enabled buttons. Alternatively, omit the disabled HTML attribute and position these buttons out of context they would normally belong to (being a part of a form).
EDIT: See Antony's answer for better explanation what styles need to be applied to make it appear like you expect them to ;)
You can force a disabled button to look just like a normal one using CSS.
DEMO
Safari: http://jsfiddle.net/9aXW9/2/
Firefox: http://jsfiddle.net/gZtT7/
IE buried its CSS in the registry. But as a general rule, apply color: #000; and other modifications would make it look like a normal button.
HTML
<input type="submit" disabled="disabled" value="I cannot be pressed." />
CSS
/* Safari */
input[type="submit"]:disabled {
-webkit-appearance: push-button;
-webkit-box-align: center;
text-align: center;
cursor: default;
color: ButtonText;
padding: 2px 6px 3px 6px;
border: 2px outset ButtonFace;
background-color: ButtonFace;
box-sizing: border-box;
white-space: pre;
}
/* Firefox */
input[type="submit"]:disabled {
-moz-appearance: button;
padding: 0px 6px 0px 6px;
border: 2px outset ButtonFace;
background-color: ButtonFace;
color: ButtonText;
font: -moz-button;
line-height: normal;
white-space: pre;
cursor: default;
-moz-box-sizing: border-box;
-moz-user-select: none;
-moz-binding: none;
text-align: center;
text-shadow: none;
}
For some reason one of my inputs acts weird. I apply general css for all my inputs
.text-input {
padding: 6px 10px;
background: #fff;
border-radius: 5px;
-webkit-border-radius: 5px;
width: 330px;
border-bottom: 1px solid #000;
}
and I apply this specific css for one particular div to make it higher
#letter {
height: 100px;
}
For some reason when I focus on #letter input and start typing text appears in vertical middle of it, I don't know what is causing the problem, but here is my page, if you focus on "Message" input you will see what I mean (tested in chrome).
http://freshbeer.lv/development/en/contact.php
Perhaps you want to use a textarea instead? input type="text" is single line only.
You should use a Text Area element for that.
<textarea></textarea>
Here's a screenshot.
And my CSS markup:
.submitbutton
{
background: url("/Content/SiteImages/button.png") no-repeat scroll 0 0 transparent;
color: white;
cursor: pointer;
height: 26px;
width: 76px;
margin-left: 8px;
margin-top: 12px;
}
Also, I'd like the background image to stretch to fit into the dimensions of the button. Currently it's displaying full size (I think). Any tips for this new HTML web developer?
HTML buttons always have a border, simply setting border:0; should fix this.
Try stating
background: 0; outline: 0;
on it.
Note: This should only be used for testing purposes, disabling the outline makes people who navigate with their keyboards to not receive feedback when focusing on your button.
If it works, try using a more subtle outline.
We have buttons of many sizes and colors that use background images. There is a label on the background image itself, but we need to keep the button's text in the HTML for usability/accessibility. How do I make the text disappear in all browsers?
Modern browsers are easy, I just used -
color: transparent;
It's Internet Explorer 7 that I can't get to comply. I've tried these CSS properties, and none of them can remove the text completely without destroying my site's layout in the process.
font-size: 0px;
line-height: 0;
text-indent: -1000em;
display: block;
padding-left: 1000px;
I would very much appreciate any help.
Personally, I go for the all CSS approach:
{ display: block;
text-indent: -9999em;
text-transform: uppercase; }
For whatever reason, text-transform: uppercase; does the trick for IE7. Of course, you'll probably have your own CSS along with that for additional styling (if needed).
Additional to your
color: transparent;
You can use something like
padding-left: 3000px;
overflow: hidden;
Regards
In some cases you can use the propery "content" to change what is contained in the element, personally though I would use javascript to do it.
Just write blank text into the element.
If the button is an input submit button, use the image
<input type="image" src="/images/some_image.png" />
You can style this with CSS
input[type="image"] {
border: 1px solid red;
width: 150px;
height: 35px;
}
If they are links, Dave provided the answer.
How do I make the text disappear in
all browsers?
I suppoose you want the altarnative text to disappear if the image is loaded.
For this puprpose you can use this:
<INPUT TYPE="image" SRC="images/yourButtongif" HEIGHT="30" WIDTH="100" ALT="Text In Case There Is No Image" />
You can apply additional styles if needed, but this minimum will do the job for you.
If I understand the question correctly, this might work (I don't have IE7 to test on at the moment, so not 100% sure)
For markup like this:
<a href="javascript:return false;" class="button" id="buttonOK"><span
class="icon">Ok</span></a>
Use this css:
span.icon {
/*visibility: hidden;*/
display:block;
margin-left:-1000;
width:100px;
}
or this might work depending on your requirements for usability/accessibility:
span.icon {
visibility: hidden;
}
I don't know what users / programs the labels need to be in the HTML for, but if it's for text browsers and such, maybe you could insert a JavaScript that removes the labels onLoad?
JQuery or Prototype would make that very easy.