CSS自定义下拉选择适用于所有浏览器IE7 + FF Webkit [英] CSS Custom Dropdown Select that works across all browsers IE7+ FF Webkit

问题描述

我想建立一个适用于所有浏览器的自订下拉式选单。我在这里创建了一个，但箭头是不可点击。如果我将其设置为选择的背景，那么firefox将覆盖它顶部的箭头。有人可以告诉我什么是最好的技术，以获得一个自定义的下拉，适用于所有的浏览器，我如何使这个旋钮可点击没有Javascript？

http://jsfiddle.net/DJDf8/1/

CSS：

  #menulist {
 -webkit-appearance：none; 
 -moz-appearance：none; 
 appearance：none; 
 height：32px; 
 border：1px solid＃000; 
 width：260px; 
 text-indent：8px; 
} 
 .arrow {
 
 cursor：pointer; 
 height：32px; 
 width：24px; 
 position：absolute; 
 right：0px; 
 background-color：＃c8c8c8; 
 background：url（'http://icons.aniboom.com/Energy/Resources/userControls/TimeFrameDropDownFilter/Dropdown_Arrow.png'）0; 
} 
  

HTML：

 < span style =position：relative; > 
< span class =arrow>< / span> 
< select id =menulist> 
< option value =one>一个< / option> 
< option value =two>两个< / option> 
< / select> 
< / span>            插件：
 
 
 
  http://ivaynberg.github.io/select2/ 
 
 
 
 Select2是一个基于jQuery的替换选择框。它支持搜索，远程数据集和无限滚动的结果。
 
 
 
它非常受欢迎，非常易于维护。 
它应该覆盖你的大部分需求，如果不是全部。
 
I would like to make a custom dropdown that works across all the browsers. I created one here but the arrow is not clickable. If I set it as the background for the select, then firefox will overwrite an arrow on top of it. Can someone tell me what's the best technique to get a custom looking dropdown that works across all the browsers and how do I make that knob clickable without Javascript?

http://jsfiddle.net/DJDf8/1/

CSS:
#menulist {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height:32px;
    border:1px solid #000;
    width:260px;
    text-indent: 8px;
}
.arrow{

    cursor:pointer;
    height:32px; 
    width:24px;
    position:absolute;
    right:0px;
    background-color:#c8c8c8;
    background:url('http://icons.aniboom.com/Energy/Resources/userControls/TimeFrameDropDownFilter/Dropdown_Arrow.png') 0;
}
HTML:
<span style="position:relative;" >
           <span class="arrow" ></span>
           <select id="menulist">
                <option value="one">One</option>
                <option value="two">Two</option>
           </select>    
        </span>

解决方案
You might check Select2 plugin:

http://ivaynberg.github.io/select2/

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.

It's quite popular and very maintainable.
It should cover most of your needs if not all.

                        
这篇关于CSS自定义下拉选择适用于所有浏览器IE7 + FF Webkit的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！