SQL Server2008的安装,SQLServer2008的安装......
2023-02-22 275 安装
select下拉框有一个下拉箭头样式,那如何去掉这个样式呢?
可以使用appearance与-ms-expand去掉这个样式。
代码如下:
.not-arrow{
padding: 5px 10px;
border:1px solid #dcd8d8;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none; /*去掉下拉箭头*/
}
/*清除ie的默认选择框样式清除,隐藏下拉箭头*/
.not-arrow::-ms-expand { display: none; }
打开html开发工具,创建一个html代码页面
在新建的html代码页面上创建一个select下拉框
代码:
select name="" id="" >
option>下拉菜单去掉箭头1/option>
option>下拉菜单去掉箭头2/option>
option>下拉菜单去掉箭头3/option>
option>下拉菜单去掉箭头4/option>
option>下拉菜单去掉箭头5/option>
option>下拉菜单去掉箭头6/option>
/select>
设置去掉下拉箭头样式。通过使用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; }
为select添加去掉下拉箭头样式(案例中下拉样式类为not-arrow)
保存html代码页面,然后使用浏览器打开,即可看到select已没有下拉的箭头
所有代码,可以直接复制所有代码粘贴到新建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>
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!
相关文章