2

我想更改我尝试使用此代码的 cmbobox 设计，它适用于 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/

4

1 回答 1

1

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

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

对于跨浏览器解决方案，通常的方法是隐藏选择并设置另一个元素的样式，使其看起来像一个选择控件。

于 2013-04-22T16:37:26.503 回答