CSS自定义下拉选择，适用于所有浏览器IE7+ FF Webkit

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?

我想制作一个适用于所有浏览器的自定义下拉列表。我在这里创建了一个，但箭头不可点击。如果我将其设置为select的背景，则firefox将覆盖其顶部的箭头。有人能告诉我什么是最好的技术，以获得适用于所有浏览器的自定义外观下拉菜单，如何在没有Javascript的情况下使该旋钮可点击？

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

CSS:

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;
}

<span style="position:relative;">
         <span class="arrow" ></span>
<select id="menulist">
         <option value="one">One</option>
         <option value="two">Two</option>
</select>
</span>

6 个解决方案

#1

This is very simple, you just need to add a background image to the select element and position it where you need to, but don't forget to add:

这很简单，您只需要在select元素中添加背景图像并将其放置在您需要的位置，但不要忘记添加：

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

According to http://shouldiprefix.com/#appearance

根据http://shouldiprefix.com/#appearance

Microsoft Edge and IE mobile support this property width the -webkit- prefix rather than -ms- for interop reasons.

出于互操作原因，Microsoft Edge和IE mobile支持此属性宽度为-webkit-前缀而不是-ms-。

I just made this fiddle http://jsfiddle.net/drjorgepolanco/uxxvayqe/

我刚做了这个小提琴http://jsfiddle.net/drjorgepolanco/uxxvayqe/

#2

As per Link: http://bavotasan.com/2011/style-select-box-using-only-css/ there are lot of extra rework that needs to be done(Put extra div and position the image there. Also the design will break as the option drilldown will be mis alligned to the the select.

根据链接：http：//bavotasan.com/2011/style-select-box-using-only-css/需要进行大量额外的返工（放置额外的div并将图像定位在那里。还有设计将断开，因为选项钻取将错误地与选择对齐。

Here is an easy and simple way which will allow you to put your own dropdown image and remove the browser default dropdown.(Without using any extra div). Its cross browser as well.

这是一种简单易用的方法，它允许您放置自己的下拉图像并删除浏览器默认下拉列表。（不使用任何额外的div）。它的跨浏览器也是如此。

HTML

<select class="dropdown" name="drop-down">
  <option value="select-option">Please select...</option>
  <option value="Local-Community-Enquiry">Option 1</option>
  <option value="Bag-Packing-in-Store">Option 2</option>
</select>

CSS

select.dropdown {
  margin: 0px;
  margin-top: 12px;
  height: 48px;
  width: 100%;
  border-width: 1px;
  border-style: solid;
  border-color: #666666;
  padding: 9px;
  font-family: tescoregular;
  font-size: 16px;
  color: #666666;
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  -moz-appearance: none;
  appearance: none;
  background: url('yoururl/dropdown.png') no-repeat 97% 50% #ffffff;
  background-size: 11px 7px;
}

#3

You might check Select2 plugin:

您可以查看Select2插件：

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.

Select2是基于jQuery的选择框替换。它支持搜索，远程数据集和无限滚动结果。

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

它非常受欢迎且非常易于维护。如果不是全部，它应该涵盖您的大部分需求。

#4

The pointer-events could be useful for this problem as you would be able to put a div over the arrow button, but still be able to click the arrow button.

指针事件可能对此问题很有用，因为您可以将div放在箭头按钮上，但仍然可以单击箭头按钮。

The pointer-events css makes it possible to click through a div.

指针事件css使得点击div成为可能。

This approach will not work for IE versions older than IE11, however. You could something working in IE8 and IE9 if the element you put on top of the arrow button is an SVG element, but it will be more complicated to style the button the way you want proceeding like this.

但是，这种方法不适用于早于IE11的IE版本。如果放在箭头按钮顶部的元素是一个SVG元素，你可以在IE8和IE9中工作，但按照你想要的方式设置按钮的样式会更加复杂。

Here a Js fiddle example: http://jsfiddle.net/e7qnqzx6/2/

这里有一个Js小提琴示例：http：//jsfiddle.net/e7qnqzx6/2/

#5

I was also having a similar problem. Finally found one solution at https://techmeals.com/fe/questions/htmlcss/4/How-to-customize-the-select-drop-down-in-css-which-works-for-all-the-browsers

我也有类似的问题。最后在https://techmeals.com/fe/questions/htmlcss/4/How-to-customize-the-select-drop-down-in-css-which-works-for-all-the-browsers找到了一个解决方案

Note:

注意：

1) For Firefox support there is special CSS handling for SELECT element's parent, please take a closer look.

1）对于Firefox支持，SELECT元素的父级有特殊的CSS处理，请仔细看看。

2) Download the down.png from Down.png

2）从Down.png下载down.png

CSS code

CSS代码

        /* For Firefox browser we need to style for SELECT element parent. */

        @-moz-document url-prefix() {

            /* Please note this is the parent of "SELECT" element */

            .select-example {   
                background: url('https://techmeals.com/external/images/down.png');
                background-color: #FFFFFF;
                border: 1px solid #9e9e9e;
                background-size: auto 6px;
                background-repeat: no-repeat;
                background-position: 96% 13px;
            }
        }

        /* IE specific styles */
        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) 
        {
                select.my-select-box {
                padding: 0 0 0 5px;
            }
        }

        /* IE specific styles */
        @supports (-ms-accelerator:true) {
                select.my-select-box {
                padding: 0 0 0 5px;
            }
        }

        select.my-select-box  {
            outline: none;
            background: #fff;
            -moz-appearance: window;
            -webkit-appearance: none;
            border-radius: 0px;
            text-overflow: "";
            background-image: url('https://techmeals.com/external/images/down.png');
            background-size: auto 6px;
            background-repeat: no-repeat;
            background-position: 96% 13px;
            cursor: pointer;
            height: 30px;
            width: 100%;
            border: 1px solid #9e9e9e;
            padding: 0 15px 0 5px;
            padding-right: 15px\9;      /* This will be apllied only to IE 7, IE 8 and IE 9 as */
            *padding-right: 15px;        /* This will be apllied only to IE 7 and below. */
            _padding-right: 15px;       /* This will be apllied only to IE 6 and below. */
        }

HTML code

HTML代码

    <div class="select-example">
        <select class="my-select-box">
            <option value="1">First Option</option>
            <option value="2">Second Option</option>
            <option value="3">Third Option</option>
            <option value="4">Fourth Option</option>
        </select>
    </div>

#6

<select class="dropdownmenu" name="drop-down">
    <option class="dropdownmenu_list1" value="select-option">Choose ...</option>
    <option class="dropdownmenu_list2" value="Topic 1">Option 1</option>
    <option class="dropdownmenu_list3" value="Topic 2">Option 2</option>
</select>

This works best in Firefox. Too bad that Chrome and Safari do not support this rather easy CSS styling.

这在Firefox中效果最好。太糟糕了，Chrome和Safari不支持这种相当简单的CSS样式。

#1