如何使用CSS </select>对默认<select>中的下拉箭头进行样式化

时间:2013-11-30 07:17:43

标签: html css

我想要设置默认下拉箭头的样式。我在下面的代码中使用了以下代码:

<div class="cselect">
    <select>
        <option>English</option>
        <option>Traditional Chinese </option>
        <option>Simplified Chinese</option>
    </select>
</div>

.cselect select {
        appearance:none;
        -webkit-appearance:none;
        -o-appearance:none;
        -moz-appearance: none;
        background: url("../images/down_arrow.png") no-repeat 46% 37%;
        border: 0 solid #000000;
        overflow: hidden;
        padding: 1px 2px 2px 2px;
        width: 100px;
    }

-moz-appearance: none;无效。

此代码有效,因为我已修复宽度并生成overflow:hidden。实际上,由于溢出隐藏属性而隐藏了箭头。但是如果<option></option>标记具有大内容文本,则它不会获得自动宽度来显示整个文本。请告诉我任何解决方案。

0 个答案:

没有答案