HTML select element with fixed width and scrollbars

Question

This is probably a basic CSS question, but I am not fluent in CSS and just seem to be going in circles.

Here's what I have in English: I have a fixed width select element of 400px. The text for each of the options does not fit in that 400px width. I don't get a horizontal scroll bar, it just cuts off the text. How do I get the scroll bar?

Here's what I have in HTML/CSS:

<div>
  <select style="width=400px">
    <option>this text is too wide to fit and gets cut off.....</option>
    ...
  </select>
</div>

I've tried the overflow property, but I'm either using it incorrectly or it doesn't work on the select element.

How do I get the horizontal scroll bar?

Answer 1

Form elements are notoriously difficult to style.

For your width setting, you have a small typo. You need

<select style="width: 400px">

Otherwise, I think horizontal scrollbars can't be achieved using a normal select element. You would have to resort to a JavaScript based alternative like SexyCombo, which may be customizable to have a scroll bar. More options here: 11 jQuery Plugins to Enhance HTML Dropdowns

Answer 2

1. it should be <select style="width: 400px;"> (not "width=")
2. a regular HTML-select doesn't have a scrollbar, no matter what you do :)