Ivan Nikolaychuk Ivan Nikolaychuk - 5 months ago 13
CSS Question

When option in select list doesn't fix into select width it's value is trimmed if we select it

So I have a select list with multiple options.

List itself is limited by width. Most of options are expected to fit into lists width, but there could be once that are longer, and I should handle this situation.

overflow-x:scroll
helps me to see the the long option values (by scrolling via x axis), but I have onether problem: when I select a long option (that doen't fit into select width) and scroll x-asis, text inside my option is trimmed to select lenth. But I want it to be fully displayed when scrolling.

Note: I know a solution with appying auto-width on select, but I'm not allowed to change the width here. It should stay the same.



select {
width: 100px;
overflow-x:scroll;
}

<select multiple size="5">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
<option>Some Very Long Option</option>
</select>




Answer

Please try this:

select {
  width: 100px;
  overflow-x:scroll;
}
select option:checked{
  background:#1E90FF;
  color:#fff;
  display:inline-block;
}
<select multiple size="5">
       <option>Option1</option>
       <option>Option2</option>
       <option>Option3</option>
       <option>Some Very Long Option</option>
</select>

Comments