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

标签 html css

我想给选择框添加样式,我尝试了以下代码,但问题是标签选项中有 less 和 rise 字母,它不会改变样式选择框的宽度并且它是固定的。如何用'width="auto"'来完成?

演示: 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;
}

最佳答案

您可以保留它而不设置显式宽度,让浏览器自动处理宽度。在这种情况下,浏览器将确定最长的选项并据此设置选择元素的宽度。或者您可以将其设置为 width=200px; 这样的宽度,这将给出明确的宽度。

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

关于html - 将样式应用于选择框,为什么不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7965562/

相关文章:

html - 我应该更改轴或向上/向下翻转的度数吗?

html - 在水平滚动下让 div 占文档宽度的 100%

css - 我的导航链接有什么问题 a :hover box doesn't include the padding? 只有内容框会改变颜色。

javascript - 如何在显示通知 DIV 时将 "dim"网页的其余部分?

css - 右栏不会到达正文底部

javascript - 在选择时调用函数的最佳方式(包括选择旧值)

mysql - HTML5;通过地理定位找到我附近的东西

html - 使用 CSS 更改悬停时兄弟元素的颜色

html - 使用 twitter Bootstrap 在不同视口(viewport)上操作表格单元格大小和宽度

css - 在动画之后转换属性