How to set width of option in dropdown List?

Question

I have a dropdown List on Internet Explorer, and I'm trying to set width of option with scrollable liste:

<select id="IndicsLibres" style="width:200px;overflow-y: scroll;">
  <option id="teste" value="0" style="max-width:10px;width:10px;">
    ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffdddddddddddddddddddffffffffffffffff
  </option>
  <option value="1">aaaa</option>
  <option value="2">bbb</option>
</select>

but style that I made doesn't effect. Do you have any suggest please.

Why do you need to change the width of an option when you can change the select box width? — Rhys Towey, Mar 29 '19 at 16:03
Hello Towey, thanks for your comment, I need to change the width of options, coz when you click on menu, and if the text is so long, the option take the lenght of the texte, and I don't want to be showed like this — Sacamoto, Mar 29 '19 at 16:08
I understand now. Standard select boxes are very limited to what you can override so I recommend using a custom dropdown selector so you can fully style the options within the list. — Rhys Towey, Mar 29 '19 at 16:17

score 1 · Answer 1 · answered Mar 29 '19 at 17:57

1

Select box, Radio buttons and Checkboxes are rendered differently in different browsers because of their native code. So for you to achieve what you're looking for, you'll need to write your custom functionality.

answered Mar 29 '19 at 17:57

Rahul Viswanath

62
5

Thank you so much guys, but How to do that, any logic to follow ? What thing that i have to change... – Sacamoto Mar 30 '19 at 10:48
I was working on something similar and you can take a look at [pen-1](https://codepen.io/kvrahul66/pen/zbOagM) and [pen-2](https://codepen.io/kvrahul66/pen/GYvPQB). Neither of them are fully complete functionality wise. Your other option would be to use libraries like jQueryUI or Bootstrap which does it for you. – Rahul Viswanath Mar 31 '19 at 04:25

score 0 · Answer 2 · answered Apr 01 '19 at 07:47

If your options has space in it than following code example may help you to solve your issue.

 $(function() {
    var clicky;
    var t=0;
    $(document).mousedown(function(e) {
        clicky = $(e.target);
    });
    $(document).mouseup(function(e) {
        clicky = null;
    });

    $("select").focusout(function(e) {
        if (typeof clicky.attr('id') !== typeof undefined && clicky.attr('id') !== false) {
         $(this).parents().children("span.selected").html(clicky.html());
         $(this).children('option[value="'+clicky.attr('id')+'"]').prop('selected', true);
  }
        
        $(this).parents().children("span.lists").html('');
        

    });
    $('select > option').text(function(i, text) {
    var attr = $(this).attr('selected');
    if (typeof attr !== typeof undefined && attr !== false) {
            $(this).parents().parents().children("span.selected").html(text);
    }
 });

  $("select").focusin(function(){
   $(this).children('option').text(function(i, text) {
       $(this).parents().children("span.lists").append("<span class='item' id='"+$(this).attr('value')+"'>"+text+"</span>");
    });
  });

 });

select {
  width: 0px;
  height: 0px;
  overflow:hidden;
  outline: none;
  border: none;
  appearance:none;
  -moz-appearance: none;

}
label{
 display: inline-block;
 padding: 5px 10px;
 position: relative;
 width: 100px;
 height: 20px;
 background-color:#ccc;

}
label .selected{
 display: inline-block;
 overflow: hidden;
 width: 100%;
 height: 100%;
}
label span.lists{
 width: 100%;
 display: inline-block;
 position: absolute;
 top: 100%;
 left: 0px;
 box-shadow: 0px 0px 2px 0px #ccc;
 background-color:#fff;
 z-index: 9;
}
label span.item{
 display: inline-block;
 width: 100%;
 border-bottom: 1px solid #ccc;
}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
 <form action="?" method="GET">
 <label><span class="selected">select..</span> <span class="lists"></span>
 <select name="test">
  <option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option>
  <option value="2" selected>ffffffff ffffffff ffffffff fffffff fffffff ffffff ffffff ffffff</option>
  <option value="3">item 3</option>
  <option value="4">item 4</option>
 </select>
 </label><br>
 <label><span class="selected">select..</span> <span class="lists"></span>
 <select name="test2">
  <option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option>
  <option value="2">item 2</option>
  <option value="3" selected>item 3</option>
  <option value="4">item 4</option>
 </select>
 </label><br>
 <button>Submit</button>
</form>

</body>
</html>

Output with Internet Explorer 11:

Reference taken from this SO post

score 0 · Answer 3 · answered Apr 01 '19 at 07:58

I made a few changes to the code. The initial width can be reduced but the width of the drop-down cannot be reduced since if has to cover the whole length of your optins.

#IndicsLibres {
  width: 100px;
}

<select id="IndicsLibres">
  <option id="teste" value="0">
    ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffdddddddddddddddddddffffffffffffffff
  </option>
  <option value="1">aaaa</option>
  <option value="2">bbb</option>
</select>

How to set width of option in dropdown List?

3 Answers3