工作中经常遇到这种需求:select不用默认样式,而是改变其默认的样式
比如select默认有个边框 有个下拉箭头。
布局代码:
<span class="tesu_select">
<select>
<option>5</option>
<option>10</option>
<option>15</option>
</select>
</span>
样式:
span.tesu_select{
border: 1px solid #277de2;
border-radius:4px;
}
span.tesu_select select{
outline: none;
border: none;
width: 38px;
/*appearance: none;
-moz-appearance: none;
-webkit-appearance: none;*/这个是去除下箭头的
color: #277de2;
}
运行结果:
这样就完成了改变select默认样式了。