css - HTML Dropdown (select) with Text Wrap and Border after every value (option)

Question

I am trying to achieve two things with DropDown.

• First I want to Wrap the text in the list of options within a dropdown.
• Second, I want to put a border after every option

and I want to support IE (and other browsers too).

This is because I would have long text in the dropdown and I don't wish to cut them. For that reason, I want to do the aforementioned things.

Something like this:-

http://jsfiddle.net/fnagel/GXtpC/embedded/result/

select the one with "Same with option text formatting, Select an Address". Notice how the options are formatted and have a border-bottom with each of them.

Here is what I tried (Text):-

.myselect {
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.myselect option {
  white-space: nowrap;
  width: 100% border-bottom: 1px #ccc solid;
  /* This doesn't work. */
}

<select name="d" class="myselect">
  <option value="sdf" class="test1"> line text How to wrap the big line text </option>
  <option value="sdf2" class="test1"> line text How to wrap the big line text </option>
  <option value="sdf3" class="test1"> line text How to wrap the big line text </option>
  <option value="sdf4" class="test1"> line text How to wrap the big line text </option>
</select>

Answer 1

select {
  width: 100px;
  overflow: hidden;
  white-space: pre;
  text-overflow: ellipsis;
  -webkit-appearance: none;
}

option {
  border: solid 1px #DDDDDD;
}

<select name="d" class="myselect">
  <option value="sdf" class="test1"> line text How to wrap the big line text </option>
  <option value="sdf2" class="test1"> line text How to wrap the big line text </option>
  <option value="sdf3" class="test1"> line text How to wrap the big line text </option>
  <option value="sdf4" class="test1"> line text How to wrap the big line text </option>
</select>