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
Related
I need to create a div with specific background-color depending on variable object.
My options are:
Create an infinite css for each color.
Style in-line.
I know style should be separated from html. But, in this case, what is more efficient?
Do you need a different color based on dynamic content ("variable object")? In that case you should go for an inline-style. It would be easy for php/whatever backend you have to serve it conditionally.
While it's best to keep most styles on a stylesheet, there are exceptions to that rule. If your particular case asks for it, feel free to add your styles inline. For example, you need a gallery of things and you need the elements with a background-image instead of an img.
No, you cannot. The options you provided are the only way... You can do a complex/advance JavaScript/jQuery but it will always boil down to on how you will provide the selectors.
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.
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.
Running the Ubuntu cloud page http://www.ubuntu.com/business/cloud/overview through http://validator.w3.org/ gives several errors, the majority of which are centred around not having <divs> and <h>s etc. within an <a> tag.
The implementation I'm interested in is the four boxes with arrows, which change colour as you hover over them (as they are <a> links). What is the valid method to implement this?
Valid ways to implement this:
separate links inside each block. Put the :hover effect on the parent div, not the link. Downside: more markup
use only inline elements inside a single link, using CSS to change them into display: block elements if necessary. Downside: potentially less semantic
use an HTML5 doctype, as [X]HTML5 allows this construction. Downside: the less easy-to-validate current moving-target nature of HTML5.
Each one of those can be a (with a :hover effect to change the background color/image), and the , which sits inside, just covers the entire div with a height and a width in your CSS.
My understanding about CSS is that, generally if you set <div style="color: Red">, all content inside <div> will be affected. However if you put a html button inside, the color on the words on the button is not affected. I'm a bit disturbed by this exception. How do I give a reasonable explanation to it?
It's about users' expectations of the user interface.
Buttons (and other user interface widgets) prefer to look like their operating system counterparts. On Windows, users expect buttons to be grey with black text, so that's how browsers present them. It's intentional that you have to try quite hard to override that behaviour.
It's because it would be impractical for input elements to inherit style information from parent elements, this means whenever you style a form, you would have to create style rules for every type of input used in it, to make sure they don't turn out unexpected. you can however force inputs to inherit their parent's style with css:
input {
color: inherit;
}
That code will cause all input elements to inherit their parent's text color style.
The "cascading" part of "Cascading Style Sheets" (CSS) means that in general, you're right: a property set on an object will cascade down to objects below it.
However for some properties this doesn't make sense, so those properties are explicitly non-cascading (eg if you set a border on a div, you don't want all its children to have borders as well).
If we were dealing with raw XML in our DOM, that's where it would end. The colour would indeed cascade all the way down. However, we're dealing with HTML, and HTML has some pre-existing conditions, exceptions and overrides. For example, a <div> always defaults to display:block; whereas a <span> will default to display:inline;.
Buttons and input fields have a lot of defaults and overrides, which is why they show up as buttons and input fields without you having to do loads of styling on them. This is also why they override the cascading effect of certain CSS rules, including color.
You can override the override by specifying inherit for the overridden styles. So if you want you button to take the red colour you specified previously, you would do something like this:
.mybutton {
color:inherit;
}
You will want to look up the rules for inheritance in CSS; certain property values will cascade to certain descendant elements, and certain ones won't. In fact, one of the possible values for many CSS properties is inherit, which suggests that this value is not always the default.
The browser itself has default styles for input types, dependent on the OS it's running on. So for Windows, it will most likely be grey, for Apple OS' blue and round (fancy).
There are very easy ways to override this in CSS, I use it all the time in my websites, customising buttons and input fields to better match my site design with images and as mentioned before color values either inherited or changed.
Here is a nice article explaining the cascade and inheritance rules native to using CSS that might help you out.
:)
Buttons and some elements else come with their own style. This style is browser dependent. In different browsers the buttons can look a bit different.