How make Select box smaller when option is too long

Question

I'm trying to make the select box smaller by breaking the line of the options

I've tried the css:

select {
     width:100px;
    }

but only the select was affected. Not the options

My desired output is to make the options the same size (width) of the select box

please help!

select {
 width:100px;
}

<select><option style="" class="" value=""></option><option label="Role de Usuario - Manter" value="62">Role de Usuario - Manter</option><option label="Role de Aplicação - Manter" value="63">Role de Aplicação - Manter</option><option label="Felipe Miranda 22222" value="121">Felipe Miranda 22222</option><option label="felipe de jesus" value="120">felipe de jesus</option><option label="Felipe de MARIA" value="123">Felipe de MARIA</option><option label="Relatório Ficha do Corretor - Visualizar" value="47">Relatório Ficha do Corretor - Visualizar</option><option label="Funcionalidade - Manter" value="42">Funcionalidade - Manter</option><option label="Perfil de Acesso - Manter" value="44">Perfil de Acesso - Manter</option><option label="Aviso Popup - Manter" value="43">Aviso Popup - Manter</option><option label="Aviso Popup - Visualizar" value="45">Aviso Popup - Visualizar</option><option label="Exibir Widget" value="46">Exibir Widget</option><option label="Relatório Diretoria - Visualizar" value="48">Relatório Diretoria - Visualizar</option><option label="Relatório Companhia - Visualizar" value="49">Relatório Companhia - Visualizar</option><option label="Relatório Sucursais - Visualizar" value="50">Relatório Sucursais - Visualizar</option><option label="Relatório Coordenador - Visualizar" value="51">Relatório Coordenador - Visualizar</option><option label="Relatório Regional - Visualizar" value="52">Relatório Regional - Visualizar</option><option label="Relatório Comercial - Visualizar" value="53">Relatório Comercial - Visualizar</option><option label="Relatório Fichas Corretores - Visualizar" value="54">Relatório Fichas Corretores - Visualizar</option><option label="Relatório Fichas Diretoria Geral - Visualizar" value="55">Relatório Fichas Diretoria Geral - Visualizar</option><option label="Relatório Fichas Diretoria Comercial - Visualizar" value="56">Relatório Fichas Diretoria Comercial - Visualizar</option><option label="Relatório Fichas Sucursal - Visualizar" value="57">Relatório Fichas Sucursal - Visualizar</option><option label="Relatório Fichas Coordenador - Visualizar" value="58">Relatório Fichas Coordenador - Visualizar</option><option label="Relatório Fichas Gerente Regional - Visualizar" value="59">Relatório Fichas Gerente Regional - Visualizar</option><option label="Relatório Fichas Gerente Comercial - Visualizar" value="60">Relatório Fichas Gerente Comercial - Visualizar</option><option label="ppdpavisopopupmanter" value="81">ppdpavisopopupmanter</option><option label="TEst" value="67">TEst</option><option label="ppdpavisopopupvisualizar" value="80">ppdpavisopopupvisualizar</option><option label="ppdpsacotavisualizar" value="82">ppdpsacotavisualizar</option><option label="ppdpsattvvisualizar" value="83">ppdpsattvvisualizar</option><option label="ppdpsagsvisualizar" value="84">ppdpsagsvisualizar</option><option label="ppdpsaescolacorvisualizar" value="85">ppdpsaescolacorvisualizar</option><option label="ppdpsacolvisualizar" value="86">ppdpsacolvisualizar</option><option label="ppdpsalabvisualizar" value="87">ppdpsalabvisualizar</option><option label="ppdpbannermanter" value="88">ppdpbannermanter</option><option label="ppdpbannervisualizar" value="89">ppdpbannervisualizar</option><option label="ppdpbuscageralvisualizar" value="90">ppdpbuscageralvisualizar</option><option label="ppdpfuncionalidademanter" value="91">ppdpfuncionalidademanter</option><option label="ppdpperfilacessomanter" value="92">ppdpperfilacessomanter</option><option label="ppdpfuncagrupamentomanter" value="93">ppdpfuncagrupamentomanter</option><option label="ppdpsaldocotavisualizar" value="94">ppdpsaldocotavisualizar</option><option label="ppdpttvpagavisualizar" value="95">ppdpttvpagavisualizar</option><option label="ppdpttvbloqueadavisualizar" value="96">ppdpttvbloqueadavisualizar</option><option label="ppdpttvbloqueadaaprovar" value="97">ppdpttvbloqueadaaprovar</option><option label="ppdpindicadormanter" value="98">ppdpindicadormanter</option><option label="ppdpindicadorvisualizar" value="99">ppdpindicadorvisualizar</option><option label="ppdpalertamanter" value="100">ppdpalertamanter</option><option label="ppdpalertavisualizar" value="101">ppdpalertavisualizar</option><option label="ppdpbibliotecamanter" value="102">ppdpbibliotecamanter</option><option label="ppdpbibliotecaupmultiplomanter" value="103">ppdpbibliotecaupmultiplomanter</option><option label="ppdpbibliotecaaprovar" value="104">ppdpbibliotecaaprovar</option><option label="ppdpbibliotecavisualizar" value="105">ppdpbibliotecavisualizar</option><option label="ppdpbibliotecaresumovisualizar" value="106">ppdpbibliotecaresumovisualizar</option><option label="ppdpbibliotecacategoriamanter" value="107">ppdpbibliotecacategoriamanter</option><option label="ppdproleusuariomanter" value="108">ppdproleusuariomanter</option><option label="ppdproleaplicacaomanter" value="109">ppdproleaplicacaomanter</option><option label="ppdprelfichacorretorvisualizar" value="110">ppdprelfichacorretorvisualizar</option><option label="ppdprelfichadiretorvisualizar" value="111">ppdprelfichadiretorvisualizar</option><option label="ppdprelfichasucursalvisualizar" value="112">ppdprelfichasucursalvisualizar</option><option label="ppdprelfichacoordvisualizar" value="113">ppdprelfichacoordvisualizar</option><option label="ppdprelfichadregvisualizar" value="114">ppdprelfichadregvisualizar</option><option label="ppdprelfichagercmlvisualizar" value="115">ppdprelfichagercmlvisualizar</option><option label="ppdprelresprodvisualizar" value="116">ppdprelresprodvisualizar</option><option label="ppdprelsinautovisualizar" value="117">ppdprelsinautovisualizar</option><option label="ppdprelperdganvisualizar" value="118">ppdprelperdganvisualizar</option><option label="ppdprelcotprodautovisualizar" value="119">ppdprelcotprodautovisualizar</option><option label="role de aplicação de teste 123" value="124">role de aplicação de teste 123</option><option label="Teste Servidor Dev" value="68">Teste Servidor Dev</option><option label="teste SAFARI APLICAÇÃO" value="72">teste SAFARI APLICAÇÃO</option><option label="asdsada" value="76">asdsada</option><option label="NAVEGADOR OK" value="125">NAVEGADOR OK</option><option label="Jose de Abreu" value="126">Jose de Abreu</option><option label="role de aplicação" value="127">role de aplicação</option><option label="retomada SAFARI" value="128">retomada SAFARI</option><option label="registro de role de aplicação" value="129">registro de role de aplicação</option><option label="sistema role aplic" value="131">sistema role aplic</option><option label="teste do internet 10" value="130">teste do internet 10</option><option label="teste INTERNET EXPLORER" value="71">teste INTERNET EXPLORER</option><option label="Funcionalidade Agrupamento - Manter" value="6">Funcionalidade Agrupamento - Manter</option><option label="345345" value="79">345345</option><option label="teste aplicação GOOGLE" value="73">teste aplicação GOOGLE</option><option label="aplicação INTERNET EXP" value="74">aplicação INTERNET EXP</option></select>

Answer 1

We can't apply styling to options in select elements as msdn mentioned here: Except for background-color and color, style settings applied through the style object for the option element are ignored.

Answer 2

You can actually apply CSS to any element in the document. This includes select and option. The rules needed should be:

select,
select > option
{
    width: 100px;
}

This sets width for both select and the childnodes which should be option's. However, keep in mind that the browsers may force rules that override this. For example, while using a tablet, the options would be too small to be usable with touch, thus a browser specific popup may appear in such a case. In Firefox I tested the width, and this works.

In case it does not work for you, you can try:

max-width: 100px;      /*should force maximum width*/
overflow: hidden;      /*in case the contents do not fit*/
word-wrap: break-word; /*wrap words that are too long on new line*/
break-word: break-all; /*same thing but stronger maybe*/

Either you keep your GUI elements such as <input /> or <select> browser/OS dependent, or you can write your own wrapper. This is for <select> not that hard to do. All you need is:

<ul class="select" data-special-type="select">
    <li>My selected option</li>
    <li>A happy little option</li>
    <li class="selected">My selected option</li>
    <li>A third option</li>
    <li>Maybe even a fourth</li>
</ul>

Then use CSS such as:

ul.select
{
    display: inline-block;
    position: relative;
    z-index: 1000;
    overflow: hidden;
    max-height: 20px;
    line-height: 20px;
    width: 100px;
    background-color: #eee;
    padding: 0px 5px;
}
ul.select:hover
{
    width: 200px;
    overflow: visible;
}
ul.select > li
{
    display: none;
}
ul.select > li:first-child
{
    display: inline-block;
}
ul.select:hover > li
{
    display: inline-block;
}
ul.select li.selected
{
    background-color: #06f;
    color: #fff;
}

You can then use JavaScript to actually make it selectable and stuff. A pure CSS way should also be possible, but it fully depends on how you want it to work/look, and what the requirements for your website are. JavaScript will be useful in case you have issues with z-index, then you need to add an extra container to the document dynamically, and show it using position: fixed at the location of the element getBoundingClientRect().

This should get you started though. And otherwise, there are also libraries to do this, if you fancy that.