The selected options disappear in the multiple drop-down tag with the scroll bar in HTML

Question

I have some dropdown list shortcuts

.Something {
  overflow-x: scroll;
  width: 16%;
}

<select multiple size="5" class="Something">
  <option>Optionfghfghfgdgdffyuujkyujg 1</option>
  <option>Optionfghfghfgdgdffyuujkyujg 1</option>
  <option>Option n fgnfn ghdnghd ngdh 2</option>
  <option>Optionfghfghfgdgdffyuujkyujg 1</option>
  <option>Option n fgnfn ghdnghd ngdh 2</option>
  <option>Option n fgnfn ghdnghd ngdh 2</option>
</select>

Run code

Therefore, whenever I select an option, the text to the right of it disappears.

Like this

I have some dropdowns on my web portal. I do not want the option text to disappear. Could this be done using HTML or CSS rather than writing customized JavaScript code? If so, how?

Answer 1

Horizontal scrolling for items <select>does not work in Edge / Chrome and is not fully supported in Firefox.

, , <div> CSS:

.Something {
  overflow-x: auto;
  overflow-y: auto;
  width: 20%;
  height: 100px;
}

.Something > select {
  overflow-y: hidden;
}

<div class="Something">
    <select multiple size="6">
      <option>Optionfghfghfgdgdffyuujkyujg 1</option>
      <option>Optionfghfghfgdgdffyuujkyujg 1</option>
      <option>Option n fgnfn ghdnghd ngdh 2</option>
      <option>Optionfghfghfgdgdffyuujkyujg 1</option>
      <option>Option n fgnfn ghdnghd ngdh 2</option>
      <option>Option n fgnfn ghdnghd ngdh 2</option>
    </select>
</div>

. size <select> , <div> .

Answer 2

, , Chrome.

, . float: left; min-width: 100%; <option>.

float: left <option> <select>. min-width: 100% , , <option>, , <select>, " " .

P.S. Chrome IE11, IE10- Firefox, <select> :)

.Something {
  overflow-x: scroll;
  width: 16%;
}

option {
  float: left;
  min-width: 100%;
}

<select multiple size="5" class="Something">
  <option>Optionfghfghfgdgdffyuujkyujg 1</option>
  <option>Optionfghfghfgdgdffyuujkyujg 1</option>
  <option>Option n fgnfn ghdnghd ngdh 2</option>
  <option>Optionfghfghfgdgdffyuujkyujg 1</option>
  <option>Option n fgnfn ghdnghd ngdh 2</option>
  <option>Option n fgnfn ghdnghd ngdh 2</option>
</select>