如何自定义选择标签？

可能重复：
Is it possible to style a select box?如何自定义选择标签？

Select Tag

我想自定义选择标记像上述这应该同样看起来在所有浏览器的图像。

CSS：

.select-bg 
{ 
    background:url(../images/select-bg.png) no-repeat top center; 
width:350px; 
height:47px; 
} 

.select-bg select 
{ 
background:#ff0000; 
} 

<div class="select-bg"> 

<select> 
<option>1</option> 
<option>1</option> 
<option>1</option> 
<option>1</option> 

</select> 

</div>

我想上面的图像作为选择框的背景。

那么，你能帮忙吗？

来源

2011-07-13 samir chauhan

有没有附加的图像。另外，你自己尝试过什么？ –

图像首先附在顶部 –

您需要什么帮助？现在的问题质量很差 - 很难回答，因为您没有确定哪里存在问题。 http://tinyurl.com/so-hints – Oded

你在这里尝试的是纯粹的CSS和HTML不可能的。你需要的是jQuery。

这里是一个伟大的list框插件列表。这one看起来像你想要的，是我个人的最爱。

来源

2011-07-13 13:35:46 Phil

另一个jQuery插件，你可能喜欢，有额外的优势，因为可与JQueryui的美乐家是fnagel's selectmenu。这是this original的演变。用一些与您的样本完全相同的示例访问该页面（颜色除外，但是它是有代表性的）。这些组件的

A（未成年人）的不便是，他们的圆角是基于CSS3和不会呈现较旧的IE的

来源

2011-07-13 13:40:00 fvu

及其与纯CSS和HTML不是不可能的，如果你使用一些新fetures的CSS3。

使用css3-gradients和border-radius，可以将select-element设置为您的示例。

但是，这种方式在缺乏支持的浏览器中无法正常工作，但应该优雅地降级，即那些不支持此功能的浏览器将显示标准的select-element。

实施例：

<style type="text/css"> 
     .wrapper select { 
      background-image: -webkit-gradient(
        linear, 
        left bottom, 
        left top, 
        color-stop(0.42, #EA0B0B), 
        color-stop(1, #F8ADAD)); 

      background-image: -moz-linear-gradient(
       center bottom, 
       #EA0B0B 42%, 
       #F8ADAD 100%); 
      border-radius:10px; 
      border:1px solid #000; 
      outline:0; 
      padding:5px; 
      color:#FFF; 
      font-weight:bold; 
     } 
     .wrapper select > option { background-color:#EA0B0B; } 
    </style> 
</head> 
<body> 
    <div class="wrapper"> 
     <select class="test"> 
      <option>first</option> 
      <option>Second</option> 
      <option>Third</option> 
     </select> 
    </div>

来源

2011-07-13 14:01:16 Dean

如何自定义选择标签？

回答

相关问题