更改组合框样式

问题描述

我想改变cmbobox设计我使用这个代码它使用chrome
，但它不工作在歌剧和firefox
HTML代码：

 < div class =styled-select> 
< select> 
< option>这是第一个选项< / option> 
< 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：

解决方案

完整的CSS样式的选择元素只支持Chrome浏览器。有关详情，请参阅此。

由于回答已经发布，Firefox已经获得了对样式选择的一些支持，但不是所有的样式选项都可用。

对于跨浏览器解决方案，正常的方法是隐藏select和to将另一个元素设置为像选择控件一样 p>

I want to change the cmbobox design I rtied to use this code it's working on chromebut it not working on opera and firefoxHTML code:

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

CSS Code:

.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/

解决方案

Full CSS styling of select elements is only support in Chrome browsers. For details, see the second answer to this question.

Since that answer was posted, Firefox has gained some support for styling selects, but not all styling options will be available.

For cross-browser solutions, the normal approach is to hide the select and to style another element to look like a select control.

这篇关于更改组合框样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！