我试图通过打破select box 的来缩小options
我已经尝试了css：
select {
width:100px;
}
但只有select受到影响。不是options
我的期望输出是使options与select box
请帮忙！
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>
答案 0 :(得分：3)
我们无法将样式应用于选择元素中的选项，如下所述msdn：Except for background-color and color, style settings applied through the style object for the option element are ignored.
答案 1 :(得分：1)
也许一个选项可以使用那些超出所需宽度的选项的jquery脚本来更改font-size。
我想象的是这样的事情：
var options = [];
//Extract "text" from options
$('select option').each(function(){
options.push($(this).html());
});
//Select the ones that exceed a number of characters.
var longer = options.filter(function(element){
return element.length > 30;
});
//Modifing the css of the options that exists in "longer"
$('select option').each(function(index){
if ($.inArray( $(this).html() , longer ) > -1){
$(this).css("font-size","10px");
}
});
也许为了更好看，最好只修改选项的最后一个单词，并让第一个单词具有原始大小。
答案 2 :(得分：0)
您实际上可以将CSS应用于文档中的任何元素。其中包括select和option。所需的规则应该是：
select,
select > option
{
width: 100px;
}
这会为width和应该是select的子节点设置option。但是，请记住，浏览器可能会强制覆盖此规则的规则。例如，在使用平板电脑时，选项太小而无法用于触摸，因此在这种情况下可能出现浏览器特定的弹出窗口。在Firefox中我测试了宽度，这很有用。
如果它不适合您，您可以尝试：
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*/
要么保持GUI元素，例如<input />或<select>浏览器/ OS依赖，要么您可以编写自己的包装器。这对<select>而言并不难。您所需要的只是：
<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>
然后使用CSS，例如：
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;
}
然后，您可以使用JavaScript实际使其可选择和填充。纯CSS方式也应该是可行的，但它完全取决于您希望它的工作/外观，以及您网站的要求。如果您遇到z-index问题，JavaScript将非常有用，那么您需要动态地向文档添加一个额外的容器，并在元素position: fixed的位置使用getBoundingClientRect()显示它。
这应该可以让你开始。如果你喜欢的话，还有一些库可以做到这一点。