将样式应用于选择框,为什么它不起作用?

时间:2011-11-01 11:08:24

标签: html css

我想把一个样式放到一个选择框中,我尝试使用以下代码,但问题是标签选项中的字母越来越小,它不会更改宽度样式选择框并且它是固定的。怎么用'width =“auto”'来完成?。

DEMO: http://jsfiddle.net/uG3gq/

<div class="select_box" style="margin: 10px 5px 0 5px;">
    <select name="type_star">
        <option disabled="disabled" value="">Select</option>
        <option>Ttttttttttttttttttttt</option>
        <option>Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
        <option>B</option>
        <option>C</option>
    </select>
</div>

.select_box {
    overflow:hidden;
    background:url(http://img4up.com/up2/17845058228414984898.png) no-repeat right #9ff;
    height:24px;
    font:13px Tahoma,Arial,Helvetica,Sans-serif;
    color:#888888;
    padding:0;
}
.select_box select {
    background:transparent;
    padding:0 0 0 0;
    border:1px soild #666;
    font-size:16px;
    color:#888888;
    height:26px;
    -webkit-appearance:none;
    outline: none;
}

1 个答案:

答案 0 :(得分:1)

您可以在不设置显式宽度的情况下离开它,让浏览器自动处理宽度。在这种情况下,浏览器将确定最长的选项并根据该选项设置select元素的宽度。或者您可以使用类似width=200px;的宽度设置它,这将给出明确的宽度。

除非您想要编写一些Javascript来确定最长的选项并动态设置宽度,否则我认为这不可行(AFAIK)