目标样式:
代码:
<form>
<select>
<option>中国</option>
</select>
<select>
<option>濮阳市</option>
</select>
<select>
<option>南乐县</option>
</select>
<select>
<option>韩张镇</option>
<option>韩张</option>
</select>
<a href="#"><span class="so">搜索</span></a>
</form>
select{
border: 0; /*取消边框*/
width: 200px;
height: 40px;
background-color: white; /*背景可以改为一张图片*/
color: rgba(132, 133, 144, 0.8);
font-size: 20px;
-webkit-appearance: none; /*取消小三角的显示*/
text-indent: 0.01px; /*仅仅为了美观*/
background-image: url(../45.jpg); /*你要替换后的小三角链接*/
background-repeat: no-repeat; /*不解释,但是别忘了*/
background-position: 170px 10px; /*把小三角放到该放的地方*/
margin: 0 20px;
}
span.so{ /*******以下为按键,与下拉框无关*******/
display: inline-block;
width: 200px;
font-size: 20;
text-align: center;
line-height: 40px;
color: white;
background-color:#e45353;
}