去除select默认样式
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了去除select默认样式相关的知识，希望对你有一定的参考价值。
<!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默认样式的主要内容，如果未能解决你的问题，请参考以下文章
css去除chrome下select元素默认border-radius
怎样用 CSS + JS 美化网页中的 select 下拉框