1. 首页
  2. 问答
  3. 选择箭头样式更改

选择箭头样式更改

2013-01-08 201 views
61

我试图用我自己的图片替换选择箭头。我在包含相同大小的div中选择，我将选择的背景设置为透明，并且在div的右上角包含一张图片（与箭头大小相同）作为背景。选择箭头样式更改

它只适用于Chrome。

enter image description here

我怎样才能使它在Firefox和IE9工作，我得到这个地方：

enter image description here

.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"> 
 
    \t \t <option value="0">Select </option> 
 
    \t \t <option value="7382">steam </option> 
 
    \t </select> 
 
     </div> 
 

 
     </p> 
 
    </fieldset> 
 
    </form> 
 
</BODY> 
 

 
</HTML>

来源

2013-01-08 user1802439

回答

70

你有没有尝试过这样的事情：

.styled-select select { 
    -moz-appearance:none; /* Firefox */ 
    -webkit-appearance:none; /* Safari and Chrome */ 
    appearance:none; 
}

没有测试过，但应该工作。

编辑：它看起来像Firefox不支持此功能，直到版本35（read more here）

有一种变通方法here，就这一职位一看jsfiddle。

来源

2013-01-08 15:32:19 Morpheus

+0

它不起作用。 – user1802439

+1

看看编辑。 – Morpheus

+0

谢谢，解决方法解决了问题。 – user1802439

5

检查这一项 这是哈克，就这么简单：

  • 设置-prefix-appearance到none删除样式
  • 使用text-indent“推”的内容有点向右
  • 最后，将text-overflow设置为空字符串。所有超出它宽度的东西都会变成......没有东西！那包括箭头。

现在你可以自由的风格你想要:)

这里是我的jsfiddle例如任何方式：http://jsfiddle.net/AEt5k/1/

来源

2014-03-30 21:08:55 sunilkjt

27

下面是一个使用一个跨度来显示值的优雅修复。

布局是这样的：

<div class="selectDiv"> 
    <span class="selectDefault"></span> 
    <select name="txtCountry" class="selectBox"> 
     <option class="defualt-text">-- Select Country --</option> 
     <option value="1">Abkhazia</option> 
     <option value="2">Afghanistan</option> 
    </select> 
</div>

JsFiddle

来源

2014-09-17 15:37:56

+4

+1这个解决方案，这是我发现在IE9和旧版浏览器上正确设计箭头的唯一方式。有很多站点简单地说你不能在IE9和之前的样式框中设置样式，而是提供回退策略，但是这种解决方案证明不然。 – Jon

+0

感谢它非常有用。 –

+3

值得一提的是：**这个解决方案需要javascript **，这个答案*没有标记为*。 –

23

只用一个类工作：

select { 
    width: 268px; 
    padding: 5px; 
    font-size: 16px; 
    line-height: 1; 
    border: 0; 
    border-radius: 5px; 
    height: 34px; 
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd; 
    -webkit-appearance: none; 
    background-position-x: 244px; 
}

http://jsfiddle.net/qhCsJ/4120/

来源

2014-12-24 20:16:11

+0

你的答案似乎是最直接的，只使用CSS。 –

+1

为什么它是值得你不必设置字段的宽度，并可以使用％为背景位置:) – shaneonabike

+2

Firefox不支持background-position-x，但它支持背景位置 – kriskodzi

5

风格标签与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/

来源

2015-09-20 11:50:01

2

它的工作在所有的浏览器：

select { 
    width: 268px; 
    padding: 5px; 
    font-size: 16px; 
    line-height: 1; 
    border: 0; 
    border-radius: 5px; 
    height: 34px; 
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd; 
    appearance:none; 
    -moz-appearance:none; /* Firefox */ 
    -webkit-appearance:none; /* Safari and Chrome */ 
    background-position-x: 244px; 

}

来源

2016-03-18 06:09:08

+0

你不认为IE浏览器。我不会为此投票。 – user1566694

17

我已成立了一个select用自定义箭头类似Julio的答案，但它不具有一组宽度和使用svg作为背景图像。 （arrow_drop_down从材料的UI图标）

select { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    background: transparent; 
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>"); 
    background-repeat: no-repeat; 
    background-position-x: 100%; 
    background-position-y: 5px; 
    border: 1px solid #dfdfdf; 
    border-radius: 2px; 
    margin-right: 2rem; 
    padding: 1rem; 
    padding-right: 2rem; 
}

enter image description here

如果你需要在IE浏览器也行更新SVG箭头为Base64并添加以下内容：

select::-ms-expand { display: none; } 

background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+);

来源

2017-02-07 10:20:05

4

这会工作特别是那些使用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 */ 
 
}
<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>

来源

2017-04-01 09:22:41 Siavas

相关问题

 相关问题