select去掉默认样式；select去掉下拉箭头
1、打开html开发工具，创建一个html代码页面
2、在新建的html代码页面上创建一个select下拉框
代码：
<select name="" id="" >
<option>下拉菜单去掉箭头1</option>
<option>下拉菜单去掉箭头2</option>
<option>下拉菜单去掉箭头3</option>
<option>下拉菜单去掉箭头4</option>
<option>下拉菜单去掉箭头5</option>
<option>下拉菜单去掉箭头6</option>
</select>
3、设置去掉下拉箭头样式。通过使用appearance、-ms-expand去掉select的下拉箭头
样式代码：
.not-arrow{
padding: 5px 10px;
border:1px solid #dcd8d8;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none; /*去掉下拉箭头*/
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
.not-arrow::-ms-expand { display: none; }
4、为select添加去掉下拉箭头样式（案例中下拉样式类为not-arrow）
5、保存html代码页面，然后使用浏览器打开，即可看到select已没有下拉的箭头
6、所有代码，可以直接复制所有代码粘贴到新建html页面保存后打开即可看到所有效果
所有代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>select去掉默认样式</title>
<style type="text/css">
.not-arrow{
padding: 5px 10px;
border:1px solid #dcd8d8;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none; /*去掉下拉箭头*/
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
.not-arrow::-ms-expand { display: none; }
</style>
</head>
<body>
<select name="" id="" class="not-arrow">
<option>下拉菜单去掉箭头1</option>
<option>下拉菜单去掉箭头2</option>
<option>下拉菜单去掉箭头3</option>
<option>下拉菜单去掉箭头4</option>
<option>下拉菜单去掉箭头5</option>
<option>下拉菜单去掉箭头6</option>
</select>
</body>
</html>
