Rumah > Artikel > hujung hadapan web > css怎么去掉select箭头
css怎么去掉select箭头
- 藏色散人asal
- 2021-04-12 14:32:082521semak imbas
css去掉select箭头的方法：首先创建一个HTML示例文件；然后通过select标签创建单选或多选菜单；最后通过“appearance:none;”等属性将默认的select选择框样式清除即可。
本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。
css清除select的下拉箭头样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
select::-ms-expand { display: none; }
.info-select{
width: 88px;
height: 25px;
border: none;
outline: none;
/*将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
-ms-appearance:none;
/*在选择框的最右侧中间显示小箭头图片*/
background: url(img/sele.png) no-repeat scroll right center transparent;
/***将sele.png替换为你的下拉箭头**/
}
</style>
</head>
<body>
<select class="info-select">
<option selected="selected">1</option>
<option>2</option>
</select>
</body>
</html>【推荐学习：css视频教程】
本例可以更换selet下拉箭头，只适用于非ie浏览器，ie样式为默认样式
Atas ialah kandungan terperinci css怎么去掉select箭头. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：javascript函数的写法有哪些Artikel seterusnya：css ul 不换行怎么实现