Select下拉选择框的美化
1.1 CSS修改select下拉框的默认样式
1、原理
将浏览器默认的下拉框样式清除,然后自定义样式,再附一张小箭头图片或者使用三角的实体字符即可。
2、用法
select { /*将默认的select选择框样式清除,IE8/9并不支持 appearance:none CSS属性*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; } /*清除ie的默认选择框样式清除,隐藏下拉箭头*/ select::-ms-expand {display: none;}
注意:上述方式不能兼容IE9及以下版本。
3、兼容低版本IE浏览器
为select添加一个父容器,容器是用来覆盖小箭头的,然后为select添加一个向右的小偏移或者宽度大于父级元素。设置父级的CSS属性为超出部分不可见(overflow: hidden;),即可覆盖小箭头。
此方法的缺陷是并不能隐藏下拉框的显示,下拉选项的宽度会比他的父容器宽,看上去有点不协调。
4、实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>实例</title> <style> /*清除ie的默认选择框样式清除,隐藏下拉箭头*/ select::-ms-expand {display:none;} select#selectTravelCity{ width:185px; padding:0.2em 0.4em; cursor:pointer; /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border:1px solid #94c1e7; /*将默认的select选择框样式清除*/ -webkit-appearance:none; -moz-appearance:none; appearance:none; } select#selectPointOfInterest{ width:185px; padding:0.2em 0.4em; border:1px solid #94c1e7; cursor:pointer; outline:none; -webkit-appearance:none; -moz-appearance:none; appearance:none; } label#lblSelect{ position: relative; display: inline-block; } label#lblSelect::after{ content:"\25bc"; position:absolute; top:0; right:0; bottom:0; width:20px; line-height:28px; text-align:center; background:#94c1e7; color:#2984ce; pointer-events:none; } label.select-container{ width: 160px; overflow: hidden; } </style> </head> <body> <select id="selectTravelCity"> <option>去掉select原有样式</option> <option>Washington DC</option> <option>Los Angeles</option> <option>Chicago</option> <option>Houston</option> <option>Philadelphia</option> <option>Phoenix</option> </select> <br><br> <label id="lblSelect"> <select id="selectPointOfInterest"> <option>定义新样式</option> <option>food beverage</option> <option>restaurant</option> <option>shopping</option> <option>taxi limo</option> <option>theatre</option> <option>museum</option> <option>computers</option> </select> </label> <br><br> <label id="lblSelect" class="select-container"> <select id="selectPointOfInterest"> <option>定义新样式</option> <option>food beverage</option> <option>restaurant</option> <option>shopping</option> <option>taxi limo</option> <option>theatre</option> <option>museum</option> <option>computers</option> </select> </label> </body> </html>
1.2利用js自定义select显示部分,覆盖select原有显示部分。
1、实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>实例</title> <style> .ui-select{ position: relative; height:28px; padding:0 30px; line-height:28px; color:#fff; background-color:#ECAFB4; } .ui-select::after{ content:"\25bc"; position:absolute; top:0; right:0; bottom:0; width:20px; line-height:28px; text-align:center; background-color:#ECAFB4; color:#fff; pointer-events:none; } select{ width:100%; height:28px; padding:0 23px; font-size: 16px; line-height:28px; opacity: 0; position: absolute; top:0; left:0; } </style> </head> <body> <div class="ui-select"> <span>使用现金券</span> <select name="" id=""> <option value="10元现金券">10元现金券</option> <option value="20元现金券">20元现金券</option> <option value="30元现金券">30元现金券</option> <option value="40元现金券">40元现金券</option> </select> </div> <!--[if !IE]><!--> <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <!--<![endif]--> <!--[if lte IE 9]> <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script> <![endif]--> <script> $(".ui-select select").change(function(){ $(this).prev("span").html($(this).find("option:selected").val()); }) </script> </body> </html>
1.3利用js完全自定义select下拉选择
1、实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>实例</title> <style> .show-part{ position: relative; height:28px; } .show-part::after{ content:"\25bc"; position:absolute; top:0; right:0; bottom:0; width:30px; line-height:28px; text-align:center; pointer-events:none; } .select-input{ width: 100%; height: 100%; padding: 2px 10px; border:1px solid #CCC; box-sizing: border-box; line-height: 24px; cursor: pointer; } ul{ height:92px; margin:0; padding:0; border:1px solid #ccc; border-top:0px; list-style:none; overflow:scroll; overflow-x:hidden; } ul li{ height:24px; padding:0 10px; font-size:14px; line-height:24px; cursor:pointer; } ul .selected{ background-color:#BC0902; color:#FFF; } </style> </head> <body> <div class="show-part"> <input class="select-input" type="text" value="请选择分类" readonly> </div> <ul style="display: none;"> <li class="selected">请选择分类</li> <li title="水果类">水果类</li> <li title="蔬菜类">蔬菜类</li> <li title="瓜果类">瓜果类</li> <li title="干货类">干货类</li> <li title="生鲜类">生鲜类</li> <li title="饮品类">饮品类</li> </ul> <!--[if !IE]><!--> <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <!--<![endif]--> <!--[if lte IE 9]> <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script> <![endif]--> <script> $(document).ready(function(){ $(".select-input").on("click",function(){ $("ul").fadeIn(800); }); $("ul li").hover(function(){ $(this).addClass("selected").siblings().removeClass("selected"); }).on("mouseup",function(){ $("ul").fadeOut(); var txt = $(this).html(); var input = document.getElementsByTagName("input"); input[0].value = txt; }); }); </script> </body> </html>
发表评论
-
html框架之iframe和frame及frameset
2019-01-22 14:55 4106html框架之iframe和frame及f ... -
Input元素去除获取焦点时的边框
2017-11-02 10:27 6921Input元素去除获取焦点 ... -
Input[type="radio"]和Input[type="checkbox"]的选中
2017-11-01 17:03 1568Input[type="radio"]和I ... -
Input只读属性详解
2017-11-01 16:27 1556Input只读属性详解 1.1概述 Reado ... -
input[type="file"]标签的美化
2017-11-01 15:34 1100input[type="file"]标签的 ... -
html布局之table表格布局
2017-09-25 08:52 3386html布局之table表格布局 1.1 table布局 1、 ... -
HTML实现页面自动跳的方法
2017-09-14 11:42 872HTML实现页面自动跳的方法 1.1方法一 直 ... -
html marquee标签讲解
2017-09-01 09:02 1606html marquee标签讲解 1.1概述 ... -
html路径小结
2017-08-25 09:38 556html路径小结 1.1概述 ... -
html meta标签用法详解(一)
2017-08-24 10:18 1089html meta标签用法详解(一) 1.1概述 ... -
Hack技术总结
2017-08-23 11:22 786Hack技术总结 1.1概述 ... -
HTML行内元素和块级元素的转换
2016-10-07 16:24 6214HTML行内元素和块级元素的转换 1.1 CSS displa ... -
div元素按比例缩放的实现方法
2016-09-08 17:54 16042div元素按比例缩放的实现方法 某些场景下,窗 ... -
HTML img布局问题详解
2016-09-08 16:52 1095HTML img布局问题详解 1.1 ... -
HTML中空格的实现方法详解
2016-09-08 15:15 2329HTML中空格的实现方法详解 浏览器总是会截短 ... -
RGB颜色与HEX十六进制颜色的换算
2016-09-07 20:57 1017RGB颜色与HEX十六进制颜色的换算 1.1换算表格 ... -
Web语义化详解
2016-07-21 14:51 622Web语义化详解 1.1概述 Web语义化主 ... -
DIV+CSS布局和TABLE布局详解
2016-07-21 10:53 764DIV+CSS布局和TABLE布局详 ... -
HTML引入CSS样式的方式详解
2016-07-21 10:06 1436HTML引入CSS样式的方式详解 1.1内联属性(Inlin ... -
设置input输入框为只读方法详解
2016-07-18 11:02 4886设置input输入框为只读方法详解 1.1禁用状态与启用状态 ...
相关推荐
这是一款效果超赞的jQuery和css3 select下拉列表框美化插件。该下拉列表美化插件没有使用图片,纯css和一点jQurey打造。共有5中不同的select下拉列表框效果。
Select.js是一款基于Tether的select下拉选择框美化插件。 该下拉框美化插件内置3种皮肤主题。它在原生select元素的基础上通过Javascript和CSS来进行改造,并通过Tether插件来进行下拉框的定位。
Select.js是一款基于Tether的select下拉选择框美化插件。 该下拉框美化插件内置3种皮肤主题。它在原生select元素的基础上通过Javascript和CSS来进行改造,并通过Tether插件来进行下拉框的定位。
jQuery实现的带select下拉选择框美化的省市区三级联动特效源码.zip
带select下拉选择框美化的jQuery省市区三级联动插件,网络上很多城市三级联动选择插件,但是 大部分是采用传统的select下拉框选择,本插件利用ul模拟美化select选择框,界面还是很不错的 最终选择的值会赋值到隐藏...
select-mania是一款jQuery下拉选择框美化插件。该插件可以将普通的select下拉选择框转换漂亮的下拉选择框,并且转换后的下拉选择框带搜索功能,可通过AJAX获取数据,带多种主题,还可以自定义主题等。
JS+CSS和图片美化select下拉列表选择框
select下拉菜单美化IE里面对选择框设计的CSS样式很难看到效果,用这里的方法就可以自定义下拉菜单了.
下拉select选择框 body{margin:20px auto;font-family:Arial,Helvetica,sans-serif;font-size:12px;width:950px;height:400px;border:solid 1px #aaa;position:relative;padding:10px;} h1{font-size:12px;color:#...
主要介绍了用JavaScript来美化HTML的select标签的下拉列表效果的方法,而且在多浏览器下的兼容效果也得到提升,需要的朋友可以参考下
Select.js是一款基于Tether的select下拉选择框美化插件。 该下拉框美化插件内置3种皮肤主题。它在原生select元素的基础上通过Javascript和CSS来进行改造,并通过Tether插件来进行下拉框的定位。 Tether Tether 是一...
基于Tether下拉选择框美化特效是一款内置3种皮肤主题,它在原生select元素的基础上通过Javascript和CSS来进行改造,并通过Tether插件来进行下拉框的定位。
Multi-Column-Select是一款多列网格样式下拉列表框美化jQuery插件。通过该插件可以将下拉列表转换为多列的网格选项布局。它支持下拉列表的单选和多选,在鼠标滑过列表选项时还带有一些有趣的动画特效。
jQuery select框美化自定义下拉菜单选择表单代码 jQuery select框美化自定义下拉菜单选择表单代码 jQuery select框美化自定义下拉菜单选择表单代码 jQuery select框美化自定义下拉菜单选择表单代码
之前我们分享过很多款非常漂亮而且实用的jQuery美化版Select下拉框插件,比如jQuery Select下拉框美化插件 菜单淡如淡出动画和漂亮实用的Select下拉框美化插件Tether都非常不错。今天我们要给大家介绍另一款基于...
pickout.js是一款效果非常炫酷的纯JavaScript下拉列表框美化插件。该下拉列表框插件大小仅5kb,在用户点击了列表框时,会弹出类似模态窗口的下拉列表,还可以对列表中的选项进行搜索过滤。
NULL 博文链接:https://gerrard-ok.iteye.com/blog/2062250
本文实例讲述了JS+CSS实现美化的下拉列表框效果。分享给大家供大家参考。具体如下: 三款款经过JS+CSS美化的下拉列表,效果很不错,总有一款适合你,先看看运行效果图: 效果查看 源码下载 具体代码如下: <...