我正在尝试用我自己的照片替换选择的箭头。我包括选择在一个div与相同的大小,我设置的背景选择为透明,我包括一个图片(与箭头大小相同)在div的右上角作为背景。

它只适用于Chrome浏览器。

我如何让它在Firefox和IE9中工作,我得到了这个:

.styled-select { width: 100px; height: 17px; overflow: hidden; overflow: -moz-hidden-unscrollable; background: url(images/downarrow_blue.png) no-repeat right white; border: 2px double red; display: inline-block; position: relative; } .styled-select select { background: transparent; -webkit-appearance: none; width: 100px; font-size: 11px; border: 0; height: 17px; position: absolute; left: 0; top: 0; } body { background-color: #333333; color: #FFFFFF; } .block label { color: white; } <HTML> <HEAD> </HEAD> <BODY> <p/> <form action="/prepareUpdateCategoryList.do?forwardto=search"> <fieldset class="block" id="searchBlock"> <p> <label style="width:80px">Class</label> <div class="styled-select"> <select property="voucherCategoryClass"> <option value="0">Select </option> <option value="7382">steam </option> </select> </div> </p> </fieldset> </form> </BODY> </HTML>


当前回答

我已经提到了这篇文章,它像魅力一样工作,除了它没有隐藏在IE浏览器中的箭头。

但是添加以下会隐藏IE中的箭头:

&: -ms-expand { 显示:没有; }

完整解决方案(sass)

$select-border-color: #ccc; $select-focus-color: green; select { cursor: pointer; /* styling */ background-color: white; border: 1px solid $select-border-color; border-radius: 4px; display: inline-block; font: inherit; line-height: 1.5em; padding: 0.5em 3.5em 0.5em 1em; /* reset */ margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; background-image: linear-gradient(45deg, transparent 50%, $select-border-color 50%), linear-gradient(135deg, $select-border-color 50%, transparent 50%), linear-gradient(to right, $select-border-color, $select-border-color); background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em; background-size: 5px 5px, 5px 5px, 1px 1.5em; background-repeat: no-repeat; /* Very imp: hide arrow in IE */ &::-ms-expand { display: none; } &:-moz-focusring { color: transparent; text-shadow: none; } &:focus { background-image: linear-gradient(45deg, $select-focus-color 50%, transparent 50%), linear-gradient(135deg, transparent 50%, $select-focus-color 50%), linear-gradient(to right, $select-focus-color, $select-focus-color); background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, calc(100% - 2.5em) 0.5em; background-size: 5px 5px, 5px 5px, 1px 1.5em; background-repeat: no-repeat; border-color: $select-focus-color; outline: 0; } }

其他回答

样式标签与CSS和使用指针事件:

<label>
<select>
   <option value="0">Zero</option>
   <option value="1">One</option>
</select>
</label>

相对CSS为

label:after {
    content:'\25BC';
    display:inline-block;
    color:#000;
    background-color:#fff;
    margin-left:-17px;   /* remove the damn :after space */
    pointer-events:none; /* let the click pass trough */
}

我只是在这里使用了一个向下箭头,但是你可以设置一个带有背景图像的块。这是一个丑陋的小提琴样本:https://jsfiddle.net/1rofzz89/

这将工作得很好,特别是那些使用Bootstrap,在最新的浏览器版本测试:

select { -webkit-appearance: none; -moz-appearance: none; appearance: none; /* Some browsers will not display the caret when using calc, so we put the fallback first */ background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat 98.5% !important; /* !important used for overriding all other customisations */ background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat calc(100% - 10px) !important; /* Better placement regardless of input width */ } /*For IE*/ select::-ms-expand { display: none; } <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-xs-6"> <select class="form-control"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> </div> </div> </div>

下面是替换箭头的最优雅的方法:

select {
  padding: 15px 5px 15px 15px;
  border: none;
  font-family: Verdana;
  font-weight: bold;
  background-color: DodgerBlue;
  color: white;
  outline: none;
  min-width: 150px;
  cursor: pointer;

  /*Remove decorations to replace arrow with custom arrow */   
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;  
  &::-ms-expand { display: none };  
}
.custom-select:after {
    /* Here we add font taken from libre office to content */
    content: "▼";
    position: absolute;
    top: 4;
    /* Here we need to calculate fonts place so that if select box width changes the custom button font will be always at same place */
    left: calc(100% - 30px);
    font-size: 80%;
    padding: 12px 7px;
    background-color: DodgerBlue;
    color: white;
    pointer-events: none;
}

简单的箭头和干净的代码

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    background: transparent url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat 100% center;
    padding-right: 25px;
}

好吧,这里似乎有很多答案。有些可能比其他的更好。如果有人绝望到想往下翻,这是我的意见:

如果你真的想要样式你的下拉菜单,不要使用<select>。在Div中使用常规的<ul>将会更加灵活。然而,如果你真的坚持使用select,因为你只是想要最小的下拉列表,这是我的:

select { appearance: none; background: white; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.1018 8C5.02785 8 4.45387 9.2649 5.16108 10.0731L10.6829 16.3838C11.3801 17.1806 12.6197 17.1806 13.3169 16.3838L18.8388 10.0731C19.5459 9.2649 18.972 8 17.898 8H6.1018Z' fill='%23212121'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.5rem center; border-radius: 2px; padding: 0.25rem 2rem 0.25rem 0.75rem; } <select> <option value="bottom-right">Bottom right</option> <option value="bottom-left">Bottom left</option> <option value="top-right">Top right</option> <option value="top-left">Top left</option> </select>

关键部分是找到一个插入符号svg,你可以把它URL转换成字符串。我可以稍微加强它,也许以某种方式旋转插入符号,但真的-我很高兴它不太丑。