用css改变下拉框样式
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用css改变下拉框样式相关的知识，希望对你有一定的参考价值。
参考技术A 分类: 电脑/网络 >> 程序设计 >> 其他编程语言问题描述:
就像文本输入框<input>样式改变一样 我要改变的是<select><option></option> </select> 标签下拉框的样式 另外补充一点 我不要作成模拟下拉框 不要看且麻烦（除非你有很简单的模拟下拉框~HOHO~）谢谢大家！对不起，上次我问错了地方，现在只有这6分了
解析:
例一：
＜select name=select size="1" class="page_speeder_1165166956"＞
＜option value="2" selected＞yesky＜/option＞
＜option value="1"＞redidea＜/option＞
＜/select＞
查一下手册,还有好多项可以设置.
例二：
<>
<head>
<style>
.box
border: 1px solid #C0C0C0;
width: 182px;
height: 20px;
clip: rect( 0px, 181px, 20px, 0px );
overflow: hidden;
.box2
border: 1px solid #F4F4F4;
width: 180px;
height: 18px;
clip: rect( 0px, 179px, 18px, 0px );
overflow: hidden;
select
position: relative;
left: -2px;
top: -2px;
width: 183px;
line-height: 14px; color: #909993;
border-style: none;
border-width: 0px;
</style>
</head>
<body>
<div class = box><div class = box2>
<select size = "1" name = "D1">
<option>内容一</option>
<option>内容二</option>
</select>
</div></div>
</body>
</>
select 下拉框的样式改变
最近在做地图遇到一个很有意思的事情，就是select下拉框的样式改变
/*第一种，改变下拉框样式*/ select { /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/ border: solid 1px #000; /*很关键：将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/ background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent; /*为下拉小箭头留出一点位置，避免被文字覆盖*/ padding-right: 14px; } /*清除ie的默认选择框样式清除，隐藏下拉箭头*/ select::-ms-expand { display: none; } /*第二种，下拉框的样式透明化*/ 不过我自己也用了特别简单粗暴的方法，主要不太想动脑 select{ border: solid 1px transparent; } 让我们的select框直接消失
以上是关于用css改变下拉框样式的主要内容，如果未能解决你的问题，请参考以下文章