Question

I have some drop down lists on my website, Currently they change their display depending on what browser/os they are being displayed on.

I would like to know how I could change their display so it looks the same on all browsers (preferably how it is displayed using a mac)

Any help would be much appreciated!!

this is my current code

<select name="university" id="university" >
          <option value="Aston">Aston University</option>
        </select>

Answer 1

Allright, you can use a bit of javascript and css for this.

<span class="select"><span>Aston University</span><select><option value="Aston">Aston University</option></select></span>

Set position relative on the .select and have the actual <select> fill up the entire space within by setting it to position absolute and using top:0;left:0;bottom:0;right:0;. Set opacity 0 on the <select>, de options will still be visible after a click. Use javascript to get the current value from the <select> and update the inner span with that value (also listen to change event).

Voila, you can now style your .select whichever way you like.