Re: option-image

On Fri, 15 Jun 2007, Dmitry Turin wrote:

> - - what is the way to specify image for <option> ?
> Something like property 'list-style-image' for <li> ?

You can set list-style-image for any element. However, it only affects 
elements with display: list-item. The option element and the select 
element have display: inline by default, but you can change this:

select { display: block; }
option { display: list-item; }

Moreover, the list marker needs some space on the left (or on the right, 
when writing direction is from right to left) of the list item content. So 
you would set something like

option { margin-left: 1.3em; }

Browser support varies. Generally, old browsers display form field 
elements in their own ways, using system routines that don't pay attention 
to anything you say in CSS, or play just limited attention. There's not 
much that CSS specifications (the topic of the www-style list) could do in 
this respect, except perhaps clarifying how HTML form field elements 
should be treated in CSS formatting, i.e. what the different CSS 
properties mean for them. Beware that there is nothing in HTML 
specifications that says that e.g. the select element _must_ have, or even 
_should_ have a particular rendering as a dropdown box or as a list box - 
just that it _typically_ has either of those renderings.

For example, IE 7 ignores the attempt to add list markers. On Firefox 2, 
the element looks like a normal unstyled dropdown box, but when you 
actually drop it down, it changes to an itemized list, with bullets (or 
images as list markers, if you have set list-style-image too). And if you 
set a value larger than 1 for the size="..." attribute in HTML markup, the 
rendering is even initially an itemized list.

> If way for <option> does not exist, than maybe there is sense to add 
> attribute, something like <option image="http:// ">.

Markup issues as such are off-topic in this list. But as the above 
explanation indicates, there is no need to even consider adding new 
presentational markup to HTML.

> It should be attribute instead of property, because apparently each 
> <option> will has unique image.

Non sequitur. If you want to use different images - which you didn't 
mention initially and which sounds strange and confusing - then you can of 
course set different list-style-image values for different option 
elements, using e.g. id or class selectors.

-- 
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/

Received on Thursday, 21 June 2007 07:37:06 UTC