自定义html下拉选择框,CSS自定义select下拉选择框的样式(不用其他标签模拟)
今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方案就是用其他的元素(如ul,li)模拟下拉菜单,或者是使用网上一些现成的插件。
其实select这个东西只靠纯CSS是不能解决这个自定义样式问题的,但既然折腾了这么久,还是说一下CSS实现的思路吧。
首先对于默认的样式:
刚开始想到使用背景,但经试验对select设置背景是无效的,于是后来就想到了覆盖,用其它元素把那个向下的箭头盖住,然后给这个元素设置背景,写了个demo发现可行,于是就有了下面的这些。
首先用一个a标签套住select:
选项一
选项二
选项三
选项四
选项五
在css里让select“隐藏”,但不能display:none;,不然select元素不存在了,在这里我们可以把select的透明度改为0,这样就看不见了,但并不影响下拉框,点击时下拉框还会出现;这样貌似是可行了,但这是会发现每次选择选项后,选项并未显示,这就是select隐藏的原因了,连着文字也隐藏了,因此我们需要一个额外的标签储存每次选择的选项,下面是完整的HTML代码:
请选择
选项一
选项二
选项三
选项四
选项五
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;
}
}
ok,终于完了。
自定义html下拉选择框,CSS自定义select下拉选择框的样式(不用其他标签模拟)相关推荐
- html下拉选择框箭头改为年,CSS自定义select下拉选择框的样式(不用其他标签模拟)...
今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...
- css中字体下划线样式,css下划线 浅谈css自定义下划线
使用css样式对一段文字或一段文字中其中几个文字设置虚线效果的下划线如何实现?我们知道css字体下划线使用text-decoration样式实现,而虚线下划线则不能使用此css样式属性.要实现通过下边 ...
- 纯css 下拉选择,纯CSS实现的下拉菜单
实现效果 实现代码 html home wordpress themes plugins tutorials web design resources links tutorials html/css ...
- html hover效果下拉个框,CSS实现Hover下拉菜单的方法
老规矩,今天来讲一个很实用的css效果,当鼠标移到按钮的时候就会自动显示下拉菜单.效果如下: 很简单的一个小demo,实现步骤如下: 首先定义一个大的div包裹一个button和一个a链接组分别设置d ...
- html下拉菜单隐藏属性,css修改selec下拉菜单样式
css修改selec下拉菜单样式2018-01-19 15:00 修改select下拉菜单样式其实可以使用javascript来操作,这样更方便. 但有些人并不喜欢,想用单纯的css来控制. 以下有三 ...
- html设置下拉筛选可以多选,select下拉框(支持筛选、多选)
Chosen 是一个支持jQuery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...
- html下拉框由后端,select下拉框通过ajax获取后台的值
我址工框按都不他移据流.果原箭近第作架量是这两天一直在写前端,修改bug,这个问题是真的搞了我一天是时间.鄙人才明白,经验缺少带来的时间分浏代刚的学过互解久点维数数请曾房总题屏断果如以气.泉公一实切式 ...
- php下拉默认选中的值,select下拉框默认选中
这次给大家带来select下拉框默认选中,select下拉框默认选中的注意事项有哪些,下面就是实战案例,一起来看一下. 本文主要介绍select下拉框的相关方法. 1.通过id获取下拉框的value和 ...
- html切换下拉菜单改变页面,通过select下拉菜单改变页面内容
web前端使用技巧:通过select下拉菜单改变页面内容 方法一: function changeTable(){ var tabIndex = document.getElementById(&qu ...
最新文章
- 医疗:ERP进销存系统(8)
- html日期选择框_第十课 日期选择框(datepicker)的操作
- (五)nodejs循序渐进-回调函数和异常处理(基础篇)
- 破境Angular(三)Angular构件之模块
- tensorflow越跑越慢_tensorflow sess.run()越来越慢的原因分析及其解决方法
- Memcached内存管理机制浅析
- C# PPT转图片的解决方案
- DeepMind去年亏损27亿元,同比扩大221%,谷歌说:继续烧
- CCF202009-4 星际旅行(100分题解链接)
- mysql使用mybatis删除不生效_解决myBatis中删除条件的拼接问题
- mockito 外部接口_mockito – Spring批处理作业的端到端测试用例
- 让计算机u盘启动,如何让vmware用u盘启动
- uibot中级认证试题_喜大普奔丨UiBot中级认证工程师考试上线啦!
- 某社区APP完整原型案例
- sfx电源和atx电源有什么区别 sfx电源和atx电源哪种好
- 娱乐游戏及计算机动画论文,有关游戏美术设计论文
- VIP邮箱发出去的邮件能撤回吗?怎么撤回邮件?
- 远程登录工具Putty下载,并连接服务器(详细笔记)
- 报错:Parameter ‘XXX‘ implicitly has an ‘any‘ type.解决方法
- bzoj3238: [Ahoi2013]差异(后缀自动机)
热门文章
- 华为vlan的多种划分方式
- 用Java do while循环实现 统计正数 和 负数个数
- Eclipse 配置搜狗(Sogou)代理
- Syn和Lock的区别
- 学习python第二课-计算机要点和python要点
- 唯女人 .
- ae制h5文字动画_如何使用HTML5+css3实现粒子效果文字动画特效(附完整代码)
- 2023年计算机专业毕业实习报告最新
- Android 颜色金属效果,上档次的磨砂金属质感机身_长虹手机_手机Android频道-中关村在线...
- 如何在iPhone或iPad上的Safari中清除历史记录,缓存和Cookie