码迷,mamicode.com
首页 > 其他好文 > 详细

去除select默认样式

时间:2017-04-28 18:43:36      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:doc   sel   row   ini   去除   max   top   appear   color   

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>下拉菜单</title>
<style>
*{border: 0;}
body{font-size: 12px;font-family: "微软雅黑";}
a,button,input,optgroup,select,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0);}
select {
/*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
border: 1px solid #707070;

/*很关键:将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;

/*在选择框的最右侧中间显示小箭头图片*/
background: url(‘img/arrow.png‘) no-repeat top 6px right 3px/14px;

/*为下拉小箭头留出一点位置,避免被文字覆盖*/
padding: 0 20px 0 2px;

/*自定义样式*/
width: 150px;
height: 30px;
border-radius: 3px;
outline: none;
font-family: "微软雅黑";
}
</style>
</head>
<body>
<div>
<select>
<option>请选择城市</option>
<option>北京</option>
<option>天津</option>
<option>上海</option>
<option>深圳</option>
<option>广州</option>
</select>
</div>

</body>
</html>

去除select默认样式

标签:doc   sel   row   ini   去除   max   top   appear   color   

原文地址:http://www.cnblogs.com/wzh1995/p/6782365.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!