Input button image - not work in Chrome & Safari?

Question

I have the following code in my index.html

<li>
<select name="cmbtype" style="display:none" id="cmbtype" onChange="Changetype()">
<option value="0">
<input type="image" src="images/ocean.png" value="Play" onclick="previewplay(); " /> 
</option>
</select> 
</li>

In firefox, opera and IE 7 I see the ocean.png and am able to click it. When I do, it accordingly plays the mp3 it is supposed to!

When I load this same code in Safari (Windows and Mac), as well as in Chrome the ocean.png is not seen and there is no button to click?

Is there something I can add or do to get this code/design to work in Safari and Chrome?

Thanks

Answer 1

Why do you have the input in your select?

It probably inherits the display: none therefor not getting rendered, which I would assume would be the correct behaviour.

Maybe IE, firefox and opera finds it illegal syntax and rewrite the input outside of the select, but webkit does not.

Answer 2

It is illegal HTML markup and not supposed to work.

• <li> stands for list item and must be inside an <ol> (ordered list) or <ul> (unordered list)

• <select> can have <optgroup> and <option>

• <option> can have characters but no element

In this case Chrome and Safaris way of doing it is the correct way to do it.