只用CSS清理挑选框的完成编码

日期:2020-09-24 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

下面是1个默认设置款式的往下拉框的相貌:

Here is the first option The second option

HTML code:

拷贝编码
编码以下:

<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>

1个挑选框的一些一部分大家是能够清理的,例如字体样式、边框、色调、内边距和情况色调:
Here is the first option The second option
可是烦人的往下拉箭头還是维持不会改变。沒有立即清理它的方法,但处理计划方案還是十分简易的,最先大家必须用1个div器皿包裹在select元素外围:

拷贝编码
编码以下:

<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>

下1步大家必须添加1些css,以保证挑选框元素被以某种方法清理:

拷贝编码
编码以下:

.styled-select select {
background: transparent;
width: 268px;
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
height: 34px;
-webkit-appearance: none; /*for chrome*/
}

大家必须保证挑选框的跨度比外围的div器皿更宽,这样默认设置的往下拉箭头就会消退(译者注:挑选框比外面的div宽敞,默认设置的往下拉箭头就会被掩藏)

下面是大家要用的新往下拉箭头:
大家的div器皿必须被清理成新的往下拉箭头出現在大家料想的部位:

拷贝编码
编码以下:

.styled-select {
width: 240px;
height: 34px;
overflow: hidden;
background: url(new_arrow.png) no-repeat right #ddd;
}

了解这点处理方法将使你十分非常容易的,无需其他只应用css就可以清理您的挑选框。
译者注:线上调式详细地址http://jsfiddle.net/shishaomeng/KGrYB/ ,各位看官可自主进到调节