38

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

4

6 回答 6

23

这很简单，你只需要在选择元素中添加一个背景图片并将其定位到你需要的位置，但不要忘记添加：

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

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

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

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

于 2015-10-26T17:41:52.473 回答
9

根据链接：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;
}
于 2016-04-21T11:56:18.920 回答
8

您可以检查Select2插件：

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

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

它非常流行并且非常易于维护。如果不是全部，它应该可以满足您的大部分需求。

于 2014-01-17T00:56:01.823 回答
2

这pointer-events可能对这个问题很有用，因为您可以在箭头按钮上放置一个 div，但仍然可以单击箭头按钮。

pointer-eventscss 使单击 div 成为可能。

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

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

于 2015-07-13T18:12:26.793 回答
1

我也有类似的问题。终于在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>
于 2017-04-23T21:09:53.807 回答
-2 
<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>

这在 Firefox 中效果最好。可惜 Chrome 和 Safari 不支持这种相当简单的 CSS 样式。

于 2017-02-21T09:57:14.870 回答