更改组合框样式[重复]

Posted 2023-03-05

【中文标题】更改组合框样式[重复]

【英文标题】：Change Combo Box style [duplicate]

【发布时间】：2013-04-15 15:39:02

【问题描述】：

我想更改我尝试使用此代码的 cmbobox 设计，它在 chrome 上运行 但它不适用于歌剧和火狐 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/

【问题讨论】：

什么确切地不起作用？您只是想删除默认箭头吗？

每个浏览器都有默认样式，可以使用 JS/JQuery 进行操作。使用UniformJS，它可以工作。

【参考方案1】：

仅 Chrome 浏览器支持选择元素的完整 CSS 样式。详情见此question的第二个回答。

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

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