CSS / HTML - 正确设置选择框的样式答案

【问题标题】：CSS / HTML - Styling select boxes properlyCSS / HTML - 正确设置选择框的样式
【发布时间】：2011-11-20 11:54:38
【问题描述】：

我对自己的 CSS 更改还很陌生，我有点卡在 select 元素上。到目前为止，我在我想要的地方使用了以下 CSS：

select {
    float: left;
    border: 0 none;
    height: 46px;
    width: 240px;
    background-color: #191919;
    font-size: 14px;
    color: white;
}

唯一的问题是，现在我看到了某种渐变，我似乎无法在 CSS 中找到任何东西来摆脱它。

下面是我看到的

【问题讨论】：

select 元素只接受非常有限的 CSS，因为它们是由操作系统呈现的，而不是浏览器本身。您可以使用样式化的ul（或ol）和一些JavaScript 来模拟select；但是样式化select 元素本身几乎不可能可靠地实现。阅读此问题以获取有关 JavaScript 方法的一些指示（尽管使用 jQuery 而不是纯 JS）：stackoverflow.com/questions/4599975/…
哇...这真的很糟糕，好的，谢谢你的帮助。

标签： html css

【解决方案1】：

你可以使用

-webkit-appearance: none;

摆脱这种渐变。

【讨论】：

【解决方案2】：

您必须使用 Javascript 来设置 Select、Checkbox、Radio 按钮的样式。

你可以使用一个库 fancyform（需要 jQuery），它可以转换上面的项目并且几乎完全支持 textarea 有一个自定义滚动条。 http://lutrasoft.nl/jQuery/fancyform/ 在源代码中，您可以获得最新版本。它真的很容易使用：

HTML：

<select class="select">
    <option>Option 1</option>
    <option>Option 2</option>
</select>

Javascript：

$(function(){
    $(".select").transformSelect();
});

CSS（您需要编辑）

.transformSelect li
{

    position    : relative;

}

    .transformSelect li span
    {
        cursor  : pointer;  
        padding     : 3px;
        border      : 1px solid #cccccc;
        width       : 154px;            
        line-height : 15px; 
        height      : 15px;
        display     : block;
    }

        .transformSelect li span:hover
        {
            background  : #eeeeee;
        }

    .transformSelect li ul
    {
        position    : absolute;
        left        : 0;    
        top         : 22px;
        border      : 1px solid #cccccc;
        width       : 160px;
        background  : #ffffff;
    }
        .transformSelect li ul li span
        {
            border  : 0;    
            cursor  : pointer;
        }
            .transformSelect li ul li span:hover
            {
                background  : #cccccc;  
            }

脚本将生成以下内容：

<ul>
    <li><span>Option 1</span>
        <ul>
            <li><span>Option 1</span></li>
            <li><span>Option 2</span></li>
        </ul>
    </li>
</ul>

您不必在源代码中包含您的UL LI，它将由脚本生成（也支持 OPTGROUP）。它确实有一些选项可以显示或隐藏第一项，有一个带有下拉菜单的输入，也有自定义输入等。

更多设置需要查看脚本来源。

【讨论】：