Question

我很新做自己的CSS更改，我有点卡在select元素上。到目前为止，我想使用以下CSS：

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

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

以下是我所看到的

http://i39.tinypic.com/20797ki.png

Answer 1

你可以使用

-webkit-appearance: none;

摆脱那个渐变。

Answer 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）。它有一些选项可以显示第一个项目或隐藏它，输入带下拉列表也有自定义输入等。

有关更多设置，您需要检查脚本的来源。

CSS / HTML - 正确选择样式框

2 个答案: