How to hide scroll bar and change width of select tag

Question

I have a select tag: how can I hide the scroll bar? The other question is how can I increse the width of this select tag

<select id="navSelection" size="5"  style="overflow-y :hidden">
    <option value="temp">Temperature</option>
    <option value="flow">Flow</option>
    <option value="press">Pressure</option>
    <option value="cond">Conductivity</option>
</select>

style="overflow-y: hidden" is not working

jsFiddle

thanks in advance

Answer 1

Hide vertical scrollbar in <select> element should answer your question about the scrollbar and:

#navSelection {
  width: xxxpx;
}

Should change the width.

Answer 2

In order to increase the width of the select element, you can either write an inline style or set the size using a class or ID:

<select style="width: 150px;"></select>

OR

select { width: 150px; }

You cannot override the default browser behavior for displaying a select dropdown.