how to adapt chainedmenu to css without form

[chechu]

1) Script Title: Chained Menu

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex1/chainedmenu/index.htm

3) Describe problem:

This is the code I have:


<div class="main-search-input-item">
<select data-placeholder="All Categories" class="chosen-select" >
<option>All Categories</option>
<option>Shops</option>
<option>Hotels</option>
<option>Restaurants</option>
<option>Fitness</option>
<option>Events</option>
</select>
</div>

And this is the code of the chainedmenu:


<form name="listmenu0">
<table align="center"><tr>
<td><select name="firstlevel" style="width:180px;"></select></td>
<td><select name="secondlevel" style="width:160px;"></select></td>
<td><select name="thirdlevel" style="width:160px;"></select></td>
<td><input type="button" value="Go" onclick="goListGroup(document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel)">
<input type="button" value="Reset" onclick="resetListGroup('chainedmenu')">
</tr></table>
</form>
But as there is no form in it, how can I make sure that the current css will be used for the selector?
This is how the form should look like (http://brunomazereel.com/Knipsel2.JPG)
And this is how it is now (http://brunomazereel.com/Knipsel1.JPG)

Can anyone help me out please?
Working on a deadline ...
Thanks!

[chechu]

Almost there, just, how can I style the options in the chained menu options?

This is how it looks now (http://brunomazereel.com/knipsel.jpg)
This is how the form should look like (http://brunomazereel.com/Knipsel2.JPG)

I cannot copy the code, because it is in a form (the chained menu) without clear option

<select name="firstlevel"></select>
where I don't see css possibilities for the options.
Whilst the other one is no forms, just select option.

<select data-placeholder="All Categories" class="chosen-select" >
<option>All Categories</option>
Any support, please?
Thanks.

[molendijk]

You can hardly style select boxes via CSS. They are rendered by the OS, not HTML. But there are plugins that look like selects and can be styled, see for ex. this fiddle (http://jsfiddle.net/BB3JK/47).

[chechu]

Thanks, Arie.
But if you take a look at the image, you can see that some styling can be done (rounded corners, shadow, soft edges)
6246

[molendijk]

Chechu, I know that native select boxes can be styled to some extend, but depending on the browser / the OS the possibilities vary a lot and are unpredictable. What looks good now may look ugly in the future. And there's a huge difference between how a computer / desktop treats boxes and how mobile devices do it.

[chechu]

Well, Arie, let's call that a matter of taste.
Still wondering how the css looks like to get that select menu as in the image.

[molendijk]

Chechu, I didn't use 'good' and 'ugly' in the esthetical sense of the word, but rather as meaning 'what I want' and 'what I don't want'. So if my styles for 'select' and 'option' fit my needs right now in all browsers, then it may be very well possible that this is not the case anymore in the future because the OS may have changed things beyond my control. This happened to this select box (http://mesdomaines.nu/eendracht/selectbox_styles/selectbox_styles.html). It looked about the same in all browsers several years ago (that's what I wanted), but not any more (that's what I don't want). Look at how different browsers render the options of that select box.
Are you sure the model you're referring to is a genuine select box, not a plugin?

[chechu]

It is a select box indeed.

[molendijk]

Well, I'm pretty sure that only 'select' can be styled to a certain extend, but not the options of the box. At least, not in a crossbrowser way. Example:
<div style="width: 140px; overflow: hidden; border: 1px solid grey; border-radius: 15px; padding: 10px; ">
<select style="font-family: arial; font-size: 20px; border:0; ">
<option selected > Three options
<option style="font-size: 16px; border: 0"> This is option 1 from a select box
<option style="font-size: 16px"> This is option 2 from a select box
<option style="font-size: 16px"> This is option 3 from a select box
</select>
</div>