Assign an option element of a select the overflow-x rule

Question

Assign an option element of a select the overflow-x rule

Navigation

#1 by (1 votes)

0

It's simple, I've spent hours trying to adjust the option labels of a select to the size of this, without expanding beyond the width that I have assigned to the select. So that if the subelement is larger than the size assigned to the select, a scroll appears in the option tag.

javascript html5 css

asked by Dany Villarroel 28.03.2018 в 15:04

source

1 answer

convert .txt file to two-dimensional array with python Why is it not placed in front of the image when positioning with absolute position the text and position relative to the image? [duplicate]

score 1 · Answer 1

Not possible with a% native% co: the <select> elements only accept style changes referring to the color of the text and its background, the rest of the customizations will be ignored. The solution would be to create your own dropdown element with an input and (for example) with a <option> and <li> that simulate the elements <ul> :

$("ul").on("click", ".init", function() {
    $(this).closest("ul").children('li:not(.init)').toggle();
});

var allOptions = $("ul").children('li:not(.init)');
$("ul").on("click", "li:not(.init)", function() {
    allOptions.removeClass('selected');
    $(this).addClass('selected');
    $("ul").children('.init').html($(this).html());
    allOptions.toggle();
});

select {
  width: 100px;
 color: white;
  border-radius: 10px;
  background-color: red;
}

option {
  width: 100px;
  color: white;
  border-radius: 10px;
  background-color: red;
}

ul { 
    height: 30px;
    width: 150px;
    border: 1px #000 solid;
    border-radius: 10px;
    list-style-type: none;
    padding-left: 10px;
}
ul li { padding: 5px 5px; z-index: 2; overflow-x: auto; white-space: nowrap;}
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select">
  <option value="value1">Value 1</option> 
  <option value="value2" selected>Value 2</option>
  <option value="value3">Value 3 con un texto muy largo</option>
</select>

<ul class="list-unstyled">
    <li class="init">[SELECT]</li>
    <li data-value="value 1">Option 1 con un texto largo que produce overflow</li>
    <li data-value="value 2">Option 2</li>
    <li data-value="value 3">Option 3</li>
</ul>

Example with list obtained from here