I am using this menu on my web page
<select id="menu">
<option value="1"><h1>one</h1></option>
<option value="2"><h1>two</h1></option>
<option value="3"><h1>three</h1></option>
</select>
I would like to know why <h1>...</h1> is not working.
Thanks!!! in advance.
The option element only allows text as content. Here’s the element definition:
<!ELEMENT OPTION - O (#PCDATA) -- selectable choice -->
I've not tried this so this is speculation but I'd suspect that putting a Heading in a drop-down menu would be nonsensical. I would alter the format of the options using a CSS class on the option itself.
<select id="menu">
<option class="mybiggertext">Option 1</option>
etc...
Because you cant -to my knowledge- use tags within the select option tag.. If you want to change the font size use CSS instead:
<html>
<head>
<style type="text/css">
select, option {font-size: 200%}
</style>
</head>
<body>
<select id="menu">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
</body>
</html>
You can not insert Html tags inside options element.
But you can do it by this way (includes all options) :
<select style="font-weight:bold;font-size:14px;color:red;">
<option>item 1</option>
<option>item 2</option>
<option>item 3</option>
</select>
Firstly, the specifications for HTML 4.01 and XHTML 1.1 specify the minimal content model for the 'option' element to be CDATA - meaning it can contain nothing but text (no child elements). Most browsers respect this and don't bother rendering any elements inside 'option'.
Secondly, it seems you're using the 'h1' element to create a visual distinction, as opposed to its correct use as a header to create a semantic content hierarchy. I'd suggest you use something along the lines of:
<option value="1" class="big">one</option>
Styling 'big' as required.
If your aim is to increase the font size in the menu options, try this instead:
<select id="menu" style="font-size:20">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>