Is it possible to change the background color of disabled option in a selectbox in HTML ?
I have 2 disabled item to split the choice in my box and would like to put a color in those disabled option to separate them.
Thanks
have you tried input[disabled] as a css selector or input:disabled. Unfortunately I don't think there's a way to do this is IE without javascript.
Locrizak is right,
input[disabled]
it is called attribute selector, and you can easily style it in CSS.
If you want to be consistent with the results you can find here a good guide.
The problem comes if you use IE6, because attribute selectors are not supported (Reference)
If you want to be sure that the result is cross-browser compatible, just add a new class to your element.
<input type="button" class="disabled"/>
this will work in IE6 as well.
Related
I am trying to add content to the selected option in a drop down list using css, when the drop down is closed. Specifically I want the drop down to say
Sort by: Option1
when closed and when you open the drop down you then see Option 1, Option 2 etc
I found this:
CSS :selected pseudo class similar to :checked, but for <select> elements
which shows how to apply a style to the right thing, but when I try and apply :before to the option element, nothing appears, in any circumstances. That is, I cannot seem to use the
option:before{
content:"before option"
}
as a rule to any effect.
Is this always the case for option elements? I also found that I could not wrap option text in span classes, so I can't do it that way.
You should be using a <label> to indicate what the <select> is for. You cannot use pseudo-elements on <option> elements because only <option> elements are valid within a <select>. The other reason you wouldn't want to do this is because pseudo-elements are typically skipped by screen readers, making the label non-accessible to a portion or the population and certain assistive technologies.
This is the proper way to associate a label such as "Sort by" with a drop down list:
Demo
<label>
Sort by:
<select>
<option>one</option>
<option>two</option>
</select>
</label>
or
<label for="my-select">Sort by: </label>
<select id="my-select">
<option>one</option>
<option>two</option>
</select>
If you require "Sort by: " within the drop-down list, you should add that label within the HTML or inject it with JavaScript as CSS cannot do this. I would suggest arguing that it is not the right way to go with your designer however as you will have a bunch of redundant text and the drop-down will just look ugly.
This is how you would go about injecting the label within the drop-down using jQuery:
Demo
$('option').each(function () {
$(this).text("Sort by: " + $(this).text());
});
In the CSS 2.1 spec, the :before pseudo-element is somewhat vaguely defined, and it says: “Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.” Although option is not empty like input, it is still rather special. There is no clarifying definition in newer CSS specs.
In practice, browsers mostly ignore :before and :after for control elements like select and their children. Testing with Firefox, IE, Chrome shows that currently only Firefox implemens option:before { content: ... }, and only when the select element is “open” (either focused so that the option list is opened or has a size attribute with a value larger than 1).
So the approach is not feasible, and you should consider a better way to deal with the ultimate problem. Apparently, you have already found out that a visible label is to be preferred to using generated content.
I'd like to get a <select> element where each <option> is labelled with an icon.
I can achieve this using <select size="5">, by applying a background image to the <select> that has each icon coincide with an option, but that relies strongly on the height of the <option> being predictable (which is isn't).
I can apply individual background colours to different options, so why not a background image?
Actually, this question can be extended to cover "What style properties can and can't be used on <option> tags?"
You cannot reliably style elements like that across browsers; some of them will allow you to insert backgrounds and such, some will not.
If you want guaranteed cross-browser compatibility the only way is to use custom widgets instead of <select> elements.
If you are OK with limited compatibility, state your target browsers.
unfortunately you cannot add images to option tags since they only support text. The only way to achieve your desired effect is to make your own "select" using javascript/jquery
Is there a trick to giving disabled (read-only) select elements a css style?
I tried
select[disabled] {color:#F00 !important}
(or variants using a class, !important etc) but that doesn't work in Chrome and IE. It does work in Firefox, but I'm looking for a universal solution.
Try input[disabled="disabled"]... it might be buggy http://reference.sitepoint.com/css/attributeselector
You could also just add a class to the disabled selector
I need to style all the input fields but one.
So i have set a rule for all the inputs on the site.
For the seachfield i need to use the browser default, so i was thinking i could just inherit all the values i have set for the general input fields. (have tried border: none to)
This does not work in FF nor Safari :( The border just gets transparent.
http://jsfiddle.net/N5KKH/1/
Any idea how i could get the default browser styling back?
EDIT: i need the first input field look like the second one:
http://jsfiddle.net/N5KKH/2/
You should be using a class on all inputs you want styled rather than a general selector on tag name.
If you cannot control this, you could try to set the input back to the default css properties which are listed here although this is not a nice solution and will probably not actually result in the default appearance of the input box.
CSS3 has the not pseudo class which could be used to select all the other inputs although this is not supported by all browsers. JS abstraction frameworks such as jQuery often allow you to use "not" selector syntax cross-browser although this is much less elegant than a pure html css solution.
EDIT
Actually, it doesn't seem to. Just gives me a solid border. Hold on, seeing what I can play with.
EDITv2
It appears that in CSS3 it can be done using the not pseudo-class. However, there doesn't appear to be a way to bring it back from a styled form element. That being said, try just adding a class to input fields you would like changed, then have it ignore the one you don't want changed.
Alternatively, you could use something like jQuery to select only the elements you'd like styled and apply the class to it or manually add the properties (but now you're adding a JS-dependance).
I'm not sure if you generate them from codebehind or hardcode them into the website, but I'd recommend that you use either a class or a name attribute on the input fields you want to look different, like this: http://jsfiddle.net/VeXgw/
I don't believe there is a simple way to unset styles because technically there is no default set style. I think your only chance would be to write some browser specific style rules with javascript to try to make it look like the defaults for each browser.
The better method may be to give all of your inputs (except the searchfield input) a class that you use to style them instead of styling ALL input tags.
Can you use an ID or Class for that single link?
Update:
Try using
border-style:inset;
should do the trick...
http://jsfiddle.net/N5KKH/10/
Is it possible to set CSS for disabled textboxes? I don't want the automatic gray-out in Firefox/Chrome.
The reason is that I'm sometimes disabling textboxes right before submitting a form so they don't get unnecessarily transmitted (and clutter the URL), and that gray-out behavior is degrading the user experience by creating flicker.
Help?
You should be able to style the text box by defining a class with how you want it to look, and then adding the class when you disable the input. If you're not worried about IE6 compatibility, then try using attribute selectors:
input[disabled="disabled"] {
/* your CSS style */
}
You should be able to use any styles you'd use on any other element.