Question

我想制作适用于所有浏览器的自定义下拉列表。我在这里创建了一个，但箭头不可点击。如果我将其设置为select的背景，则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;
}

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

Answer 1

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

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

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

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

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

Answer 2

根据Link：http://bavotasan.com/2011/style-select-box-using-only-css/，需要进行大量额外的返工（将额外的div放在那里并将图像放在那里。此外，设计将会因为选项下钻将错误地分配给选择而中断

这是一种简单易用的方法，允许您放置自己的下拉图像并删除浏览器默认下拉列表。（不使用任何额外的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;
}

Answer 3

您可以查看 Select2 插件：

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

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

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

Answer 4

pointer-events可能会对此问题有用，因为您可以在箭头按钮上添加div，但仍然可以单击箭头按钮。

pointer-events css可以点击div。

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

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

Answer 5

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

找到了一个解决方案

注意：

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

2）从Down.png

下载down.png

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代码

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

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

5 个答案: