css select 美化
时间:2019-06-14 发布者: 访问量:3760
<!DOCTYPE> | |
<html> | |
<head> | |
<style> | |
select { | |
/*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ | |
border: solid 1px #000; | |
padding:2px 50px; | |
/*很关键:将默认的select选择框样式清除*/ | |
appearance:none; | |
-moz-appearance:none; | |
-webkit-appearance:none; | |
/*在选择框的最右侧中间显示小箭头图片*/ | |
background: url("https://raw.githubusercontent.com/ourjs/static/gh-pages/2015/arrow.png") no-repeat scroll right center transparent; | |
/*为下拉小箭头留出一点位置,避免被文字覆盖*/ | |
/* padding-right: 14px; */ | |
} | |
/*清除ie的默认选择框样式清除,隐藏下拉箭头*/ | |
select::-ms-expand { display: none; } | |
</style> | |
</head> | |
<body> | |
<select class="sel"> | |
<option>请选择</option> | |
<option>选项一</option> | |
<option>选项二</option> | |
<option>选项三</option> | |
<option>选项四</option> | |
<option>选项五</option> | |
<option>选项六</option> | |
<option>选项七</option> | |
</select> | |
</body> | |
</html> |
相关信息
用户评论
猜你喜欢
生活励志
生活文摘
生活福利
生活编程