CSS自定义select下拉选择框不用其他标签模拟且兼容多数浏览器
发布时间：2014-09-06 16:39:51 作者：佚名 
我要评论
我要评论怎么自定义select下拉选择框的样式，起先考虑怎样使用纯CSS实现，把浏览器默认的样式覆盖掉，但达不到理想的兼容，下面是比较有效的解决方案，需要的朋友可以看看
今天群里有人问到怎么自定义select下拉选择框的样式，于是群里就展开了激烈的讨论，刚开始一直就是考虑怎样使用纯CSS实现，把浏览器默认的样式覆盖掉，但最后均因兼容问题处理不好而失败告终，最后的解决方案就是用其他的元素（如ul,li）模拟下拉菜单，或者是使用网上一些现成的插件。
其实select这个东西只靠纯CSS是不能解决这个自定义样式问题的，但既然折腾了这么久，还是说一下CSS实现的思路吧。
首先对于默认的样式：
刚开始想到使用背景，但经试验对select设置背景是无效的，于是后来就想到了覆盖，用其它元素把那个向下的箭头盖住，然后给这个元素设置背景，写了个demo发现可行，于是就有了下面的这些。
首先用一个a标签套住select：
复制代码
代码如下:<a class="btn-select" id="btn_select">
<select>
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
<option>选项四</option>
<option>选项五</option>
</select>
</a>
在css里让select“隐藏”，但不能display:none;，不然select元素不存在了，在这里我们可以把select的透明度改为0，这样就看不见了，但并不影响下拉框，点击时下拉框还会出现；这样貌似是可行了，但这是会发现每次选择选项后，选项并未显示，这就是select隐藏的原因了，连着文字也隐藏了，因此我们需要一个额外的标签储存每次选择的选项，下面是完整的HTML代码：
复制代码
代码如下:<form>
<a class="btn-select" id="btn_select">
<span class="cur-select">请选择</span>
<select>
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
<option>选项四</option>
<option>选项五</option>
</select>
</a>
</form>
CSS代码：
复制代码
代码如下:* {
margin: 0;
padding: 0;
}
body {
padding: 50px 50px;
}
.btn-select {
position: relative;
display: inline-block;
width: 150px;
height: 25px;
background-color: #f80;
font: 14px/20px "Microsoft YaHei";
color: #fff;
}
.btn-select .cur-select {
position: absolute;
display: block;
width: 150px;
height: 25px;
line-height: 25px;
background: #f80 url(ico-arrow.png) no-repeat 125px center;
text-indent: 10px;
}
.btn-select:hover .cur-select {
background-color: #f90;
}
.btn-select select {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 25px;
opacity: 0;
filter: alpha(opacity: 0;);
font: 14px/20px "Microsoft YaHei";
color: #f80;
}
.btn-select select option {
text-indent: 10px;
}
.btn-select select option:hover {
background-color: #f80;
color: #fff;
}
最后效果是这样的(Chrome上的截图)：
但这样做并不能完全覆盖浏览器的默认样式，如图中下拉框的边框处理不掉，另外，在ie上就更难看了，所以真正项目中使用的话，还是用插件吧，或者用其他元素代替。
到这里，本文并没有完，还要用到一段js，需要把选中的内容放到span标签里显示出来，下面是js代码：
复制代码
代码如下:var $$ = function (id) {
return document.getElementById(id);
}
window.onload = function () {
var btnSelect = $$("btn_select");
var curSelect = btnSelect.getElementsByTagName("span")[0];
var oSelect = btnSelect.getElementsByTagName("select")[0];
var aOption = btnSelect.getElementsByTagName("option");
oSelect.onchange = function () {
var text=oSelect.options[oSelect.selectedIndex].text;
curSelect.innerHTML = text;
}
}
相关文章
- CSS Grid 是一种二维布局系统，可以同时控制行和列，相比 Flex（一维布局），更适合用在整体页面布局或复杂模块结构中,这篇文章主要介绍了前端CSS Grid 布局详解,需要的朋2025-04-16
- CSS 中的 padding 和 margin 是两个非常基础且重要的属性，它们用于控制元素周围的空白区域，本文将详细介绍 padding 和 margin 的概念、区别以及如何在实际项目中使用它们2025-04-07
- will-change 是一个 CSS 属性，用于告诉浏览器某个元素在未来可能会发生哪些变化，本文给大家介绍CSS will-change 属性详解，感兴趣的朋友一起看看吧2025-04-07
- 本文给大家分享在 CSS 中，去除a标签（超链接）的下划线的几种方法，本文给大家介绍的非常详细，感兴趣的朋友一起看看吧2025-04-07
在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展，CSS的用法也日益丰富和高级,本文将2025-04-07css中的 vertical-align与line-height作用详解
文章详细介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案，感兴趣的朋友跟随小编一起看看吧2025-03-26浅析CSS 中z - index属性的作用及在什么情况下会失效
z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性（如relative、absolute、fixed或sticky），本文给大家介绍CSS 中z - index属性的作用2025-03-21- 文章详细介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例,如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等2025-03-18
CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)
本文介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示，感兴趣的朋友一起2025-03-10
前端 CSS 动态设置样式：:class、:style 等技巧(推荐)
本文介绍了Vue.js中动态绑定类名和内联样式的两种方法：对象语法和数组语法,通过对象语法,可以根据条件动态切换类名或样式；通过数组语法,可以同时绑定多个类名或样式,此外2025-02-26
最新评论