Html 如何自定义要选择的箭头?
我有这个样本:Html 如何自定义要选择的箭头?,html,css,Html,Css,我有这个样本: 选择1 选择2 选择35555 我想选择并自定义下图中的箭头 我该怎么做?我发现了一些类似的帖子,但我仍然不明白怎么做。。。你能帮我举个简单的例子吗?你需要使用CSS 这是我在google上找到的一个选择css模板的示例: HTML: <div> <select class="select-style"> <option>Select1</option> <option>Select2&l
选择1
选择2
选择35555
我想选择并自定义下图中的箭头
我该怎么做?我发现了一些类似的帖子,但我仍然不明白怎么做。。。你能帮我举个简单的例子吗?你需要使用CSS
这是我在google上找到的一个选择css模板的示例:
HTML:
<div>
<select class="select-style">
<option>Select1</option>
<option>Select2</option>
<option>Select35555</option>
</select>
</div>
.select-style {
padding: 0;
margin: 0;
border: 1px solid #ccc;
width: 120px;
border-radius: 3px;
overflow: hidden;
background-color: #fff;
background: #fff url("http://www.scottgood.com/jsg/blog.nsf/images/arrowdown.gif") no-repeat 90% 50%;
}
.select-style select {
padding: 5px 8px;
width: 130%;
border: none;
box-shadow: none;
background-color: transparent;
background-image: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.select-style select:focus {
outline: none;
}
您可以修改它,并根据需要进行更改。您也可以更改箭头的大小。jsfiddle是否需要更新?@Marius添加了jsfiddle
.select-style {
padding: 0;
margin: 0;
border: 1px solid #ccc;
width: 120px;
border-radius: 3px;
overflow: hidden;
background-color: #fff;
background: #fff url("http://www.scottgood.com/jsg/blog.nsf/images/arrowdown.gif") no-repeat 90% 50%;
}
.select-style select {
padding: 5px 8px;
width: 130%;
border: none;
box-shadow: none;
background-color: transparent;
background-image: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.select-style select:focus {
outline: none;
}