693982 - Option elements are not styled when in a datalist element

Status: UNCONFIRMED

(Core :: Layout: Form Controls, defect)

Description

[Eldmannen]

Attachment: styled_datalist_testcase.html

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:7.0.1) Gecko/20100101 Firefox/7.0.1
Build ID: 20110928134238

Steps to reproduce:

Attempted to style OPTION element that was inside a DATALIST element.


Actual results:

The OPTION element did not get styled.


Expected results:

The OPTION element should have got styled.

Comment 1

[Boris Zbarsky [:bzbarsky]]

Comment on attachment 566502 [details]
styled_datalist_testcase.html

Per spec, it's not clear that either one should work.

Comment 2

[Mounir Lamouri (:mounir)]

The select element is using the options directly while the list attribute is getting the options from the datalist element and then read the value and label attributes. In other words, it is not evident that styling datalist's option elements should have an impact in the rendering of the list.

In one hand, I would like to WONTFIX this and ask for a way to style the autocomplete list. In other hand, other input types will not use the autocomplete list and styling how the suggestions are shown might be required still...

Comment 3

[Anders Ekdahl]

Styling the options would be nice, but I don't see it as a necessity. But one thing I've noticed is that if the input field is short, and the datalist option texts are long, the option dropdown is a bit short, and you have to hover the options to get the whole text. 
It would be very nice to at least be able to set the width of either the datalist or the options.

Comment 4

[Eldmannen]

Yeah, styling would be nice.

Imagine you have a datalist with countries.
Then all countries could be styled with a flag representing the country.

Comment 5

[Igor Pavlov]

<input style="font-size: 1.5em;font-style:italic;color:red;background:magenta;"
	list="idi1" />
	<datalist id="idi1">
		<option value="id"></option>
		<!-- Next option -->
    </datalist>
<!--
 datalist - style "font-size", "font-style", "color", "background" does not work.
 IE10, Opera - OK;
 Google Chrome - style "font-size" - OK.
-->

Comment 6

[Eldmannen]

(In reply to Igor Pavlov from comment #5)
> <input style="font-size:
> 1.5em;font-style:italic;color:red;background:magenta;"
> 	list="idi1" />
> 	<datalist id="idi1">
> 		<option value="id"></option>
> 		<!-- Next option -->
>     </datalist>
You're styling the INPUT.
This is about styling the OPTION.
So when the suggestions appears, different suggestions can be styled differently.

Comment 7

[Igor Pavlov]

(In reply to Eldmannen from comment #6)
> This is about styling the OPTION.
> So when the suggestions appears, different suggestions can be styled
> differently.
    <datalist id="idi1" style="font:size: 1.5em;">
		<option value="id" style="font:size: 1.5em;"></option>
 		<!-- Next option -->
    </datalist>
<------ style does not work; font size does not change ---------------->