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&爿讥旌护gt; <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>
