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

我很新，正在做自己的CSS更改，我有点卡在select元素上。到目前为止，我有它，我想用下面的CSS：CSS/HTML - 正确设置选择框的样式

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

来源

2011-11-20 Blap Blap

'select'元素只接受非常有限的CSS，因为它们是由操作系统呈现的，而不是浏览器本身。你可以通过使用样式化的'ul'（或'ol'）和一些JavaScript来模拟'select';但“选择”元素本身的风格几乎不可能实现可靠。阅读这个问题的一些关于JavaScript方法的指针（尽管使用jQuery而不是普通的JS）：http://stackoverflow.com/questions/4599975/html-select-box-options-on-hover –

哇...这就是真的可怕的，好的谢谢你的帮助。 –

你必须使用JavaScript类型选择，复选框，单选按钮。

有一个库的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）。它有一些选项来显示第一项或隐藏它，有一个输入与下拉菜单也有自定义输入等。

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

来源

2011-11-20 12:08:44 Niels

项目也可在github https://github.com/Lutrasoft/Fancyform – Niels

可以使用

-webkit-appearance: none;

，以摆脱梯度。

来源

2012-10-11 07:00:42 Aarvos

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

回答

相关问题