Question

我想改变组合框设计，我试图使用这个代码，它正在使用chrome 但它不适用于opera和firefox HTML代码：

<div class="styled-select">
   <select>
      <option>Here is the first option</option>
      <option>The second option</option>
   </select>
</div>

CSS代码：

.styled-select select {
       background: transparent;
       width: 268px;
       padding: 5px;
       font-size: 16px;

       border: 0;
       border-radius: 0;
       height: 34px;
       -webkit-appearance: none;
       -moz-appearance:none;
       appearance: none;
       }

.styled-select {
       width: 271px;
       height: 43px;
       overflow: hidden;
       background: url(img/cmbbox.png) no-repeat;
       border: 0;
       }

jsFiddle：http://jsfiddle.net/Sz2e6/

Answer 1

精选CSS元素的完整CSS样式仅支持Chrome浏览器。有关详细信息，请参阅此question的第二个答案。

自从该答案发布以来，Firefox已经获得了一些样式选择支持，但并非所有样式选项都可用。

对于跨浏览器解决方案，通常的方法是隐藏选择并将另一个元素设置为外观，就像选择控件一样。

改变组合框样式

1 个答案: