Html 如何更改选择框箭头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22153080/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I change the select box arrow
提问by Jason Kelly
I need your help.
我需要你的帮助。
I can't seem to wrap my head around this one and figure it out. How do I change the default Windows 7, IE 10 default arrow in the select box:
to make it look like this, using the custom arrow below:.
我似乎无法绕过这个并弄清楚。如何更改选择框中的默认 Windows 7、IE 10 默认箭头：使其看起来像这样，使用下面的自定义箭头：。
Here is the arrow that I desire to use:
这是我想要使用的箭头：
Here is my HTML markup:
这是我的 HTML 标记：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
select { font: normal 13px Arial; color: #000;}
.container {
border: 1px solid red;
position: relative; width: 124px; height: 18px; overflow: hidden;
}
.inpSelect {
color: black; background: #ffa;
position: absolute; width: 128px; top: -2px; left: -2px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="container">
<select class="inpSelect" name="xxx">
<option value="0" selected="selected">actual browser</option>
<option value="1">IE</option>
<option value="2">Firefox</option>
<option value="3">Opera</option>
<option value="4">Safari</option>
</select>
</div>
</body>
</html>
回答by Veiko J??ger
You can skip the container or background image with pure css arrow:
您可以使用纯 css 箭头跳过容器或背景图像：
select {
/* make arrow and background */
background:
linear-gradient(45deg, transparent 50%, blue 50%),
linear-gradient(135deg, blue 50%, transparent 50%),
linear-gradient(to right, skyblue, skyblue);
background-position:
calc(100% - 21px) calc(1em + 2px),
calc(100% - 16px) calc(1em + 2px),
100% 0;
background-size:
5px 5px,
5px 5px,
2.5em 2.5em;
background-repeat: no-repeat;
/* styling and reset */
border: thin solid blue;
font: 300 1em/100% "Helvetica Neue", Arial, sans-serif;
line-height: 1.5em;
padding: 0.5em 3.5em 0.5em 1em;
/* reset */
border-radius: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance:none;
-moz-appearance:none;
}
Sample here
样品在这里
回答by Julio Marins
Working with just one selector:
仅使用一个选择器：
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;
}
回答by Seth McClaine
CSS
CSS
select.inpSelect {
//Remove original arrows
-webkit-appearance: none;
//Use png at assets/selectArrow.png for the arrow on the right
//Set the background color to a BadAss Green color
background: url(assets/selectArrow.png) no-repeat right #BADA55;
}
