自写select下拉框,样式随意改
CSS自定义select下拉选择框（不用其他标签模拟）
CSS⾃定义select下拉选择框（不⽤其他标签模拟）今天群⾥有⼈问到怎么⾃定义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上就更难看了，所以真正项⽬中使⽤的话，还是⽤插件吧，或者⽤其他元素代替。
element下拉框整体样式修改
element下拉框整体样式修改组件⾥的下拉框el-select是这样的：<div class="the_national"> <el-select v-model="value"> <el-option v-for="item in options":key="item.value":label="bel":value="item.value"class="provinces_select" > </el-option> </el-select></div><style lang="scss" scoped>.the_national {cursor: pointer;font-size: 24px;font-weight: 500;font-family: "PingFang SC";text-align: center;padding-top: 15px;::v-deep input::-webkit-input-placeholder {color: #fff;}::v-deep input::-moz-input-placeholder {color: #fff;}::v-deep input::-ms-input-placeholder {color: #fff;}// input框-::v-deep .el-select,::v-deep .el-input,::v-deep .el-input__inner {width: 120px;background-color: rgba(0, 0, 0, 0.2);color: #106393;border: 0px;border-radius: 0px;font-size: 24px;}// input框-右侧的箭头-::v-deep .el-select .el-input .el-select__caret {color: #106393;}// option选项-上⾯的箭头::v-deep.el-popper[x-placement^="bottom"] .popper__.arrow::before {border: none !important;z-index: 999;}::v-deep.el-popper[x-placement^="bottom"] .popper__arrow::after {border: none !important;z-index: 999;}::v-deep.popper__arrow {border: none;}// option选项-最外层::v-deep.el-select-dropdown {border: none !important;background: #192f4a !important;z-index: 999;}// option选项-⽂字样式::v-deep.el-select-dropdown__item {color: rgba(255, 255, 255, 0.55) !important;z-index: 999;}// 移⼊option选项-样式调整::v-deep.el-select-dropdown__item.hover{background-color: rgba(255,255,255,0.1);color: rgba(255, 255, 255, 0.9) !important;z-index: 999;}}</style>如果option样式不⽣效，可以在标签中加上<el-select :popper-append-to-body="false">如果是vue3可把样式中的::v-deep改成。
select下拉框option的样式修改
select下拉框option的样式修改select原样式：进⾏样式修改后的样式：附上修改代码：//select外⾯必须包裹⼀个div,⽤来覆盖select原有的样式<div class="option"><select name=""><option value=" ">筛选实验类型</option><option value="实验1">实验1</option><option value="实验2">实验2</option></select></div>css:.option{/*⽤div的样式代替select的样式*/margin: 100px;width: 140px;height: 40px;/*border-radius: 5px;*//*盒⼦阴影修饰作⽤,⾃⼰随意*//* box-shadow: 0 0 5px #ccc;*/border: 1px solid #cccccc;position: relative;}.option select{/*清除select的边框样式*/border: none;/*清除select聚焦时候的边框颜⾊*/outline: none;/*将select的宽⾼等于div的宽⾼*/width: 100%;height: 40px;line-height: 40px;/*隐藏select的下拉图标*/appearance: none;-webkit-appearance: none;-moz-appearance: none;/*通过padding-left的值让⽂字居中*/padding-left: 20px;}/*使⽤伪类给select添加⾃⼰想⽤的图标*/.option:after{content: "";width: 14px;height: 8px;background: url(../assets/arrow-down.png) no-repeat center;/*通过定位将图标放在合适的位置*/position: absolute;right: 20px;top: 41%;/*给⾃定义的图标实现点击下来功能*/pointer-events: none;}但是有个问题；option的样式没办法修改；我各种百度搜索，没有搜索出如何修改其样式；因为option是html固有元素;因⽽⽆论怎么修改在浏览器上都是不起作⽤的。
html中可以自定义输入的select下拉列表
html中可以⾃定义输⼊的select下拉列表在项⽬开发中，往往有这种需求：那就是需要下拉选择已有的数据列表，当没有⾃⼰需要的数据时，往往需要去管理这些列表数据的画⾯去添加，或者在下拉列表后⾯放⼀个快捷按钮，先添加，然后再选。
那么问题就来了，如果按照上⾯的操作，往往需要很多步骤，能不能当没有可选项⽬时，直接在下拉列表上输⼊呢？答案是可以的。
下⾯就是⽤ JS 实现了下拉列表上⾃定义选项的功能，请参考。
<!DOCTYPE html><html><head><title>可编辑的下拉列表</title></head><style type="text/css">.cls_select_span {position:absolute;border:1pt solid #c1c1c1;overflow:hidden;width:188px;height:19px;clip:rect(-1px 190px 190px 170px);}.cls_input_span {position:absolute;border-top:1pt solid #c1c1c1;border-left:1pt solid #c1c1c1;border-bottom:1pt solid #c1c1c1;width:170px;height:19px;}.cls_option_defined {color:#c2c2c2;}.cls_select {width:190px;height:20px;margin:-2px;}.cls_input {width:170px;height:15px;border:0pt;}</style><body><span class="cls_select_span"><select id="id_select" class="cls_select" onChange="selectOnChangeFunc()"><option value="" class="cls_option_defined">---⾃定义---</option><option value="开发部">开发部</option><option value="市场部">市场部</option><option value="销售部">销售部</option></select></span><span class="cls_input_span"><input type="text" id="id_input" class="cls_input" value="可选择也可⾃定义输⼊"></span><script>function selectOnChangeFunc() {document.getElementById('id_input').value = document.getElementById('id_select').options[document.getElementById('id_select').selectedIndex].value;}</script></body></html>。
多选下拉框（select下拉多选）
多选下拉框（select下拉多选）⽅法⼀：使⽤.js和 .css实现HTML代码： <select id='checkedLevel' style="width:120px;height:28px;" multiple="multiple"> <option value="1">选项1</option> <option value="2">选项1</option> <option value="3">选项1</option> <option value="4">选项1</option> <option value="5">选项1</option> <option value="6">选项1</option> <option value="7">选项1</option> </select>js代码： $('#checkedLevel').multipleSelect({ addTitle: true, //⿏标点悬停在下拉框时是否显⽰被选中的值 selectAll: false, //是否显⽰全部复选框，默认显⽰ name: "质控级别", selectAllText: "选择全部", //选择全部的复选框的text值 allSelected: "全部", //全部选中后显⽰的值 //delimiter: ', ', //多个值直接的间隔符，默认是逗号 placeholder: "质控级别" //不选择时下拉框显⽰的内容 });//设置默认选中:其中数组中多个值⽤逗号分隔，值是option的value $("#checkedLevel").multipleSelect('setSelects', [1001,1002]);设置选中后关闭下拉框：$('#selectJcjb').multipleSelect("close");//其他的⽅法，可到js中去查看⽅法名，根据实际情况进⾏调⽤。
div模仿select下拉框
div模仿select下拉框由于css不能修改select option的样式，使⽤起来不灵活，所以写⼀个⽤div效仿的select下拉框。
html<div class="aside__status-text___3dXKm"><span><div class="status_circle status_circle_online"></div>在线</span></div><ul id="" value=""class="selectBoxs"><li value=""><div class="status_circle status_circle_online"></div>在线</li><li value=""><div class="status_circle status_circle_hide"></div>隐⾝</li></ul>css.selectBoxs{background-color: rgb(255, 255, 255);padding: 10px;line-height: 20px;position: absolute;top: 119px;z-index: 19920829;border-radius: 3px;text-overflow: ellipsis;word-break: keep-all;overflow: hidden;white-space: nowrap;border: 0;width: 100%;color: #989898;appearance:none;-moz-appearance:none;-webkit-appearance:none;display: none;}.status_circle{display: inline-block;width: 8px;height: 8px;background-color: #30cc80;border-radius: 50%;margin-right: 7px;}.status_circle_hide{background-color: orange;}js<script src="../js/jquery-1.11.0.min.js"></script><script>// 切换在线状态var selectBox = $('.selectBoxs'); //下拉框var selectlist = $('.selectBoxs li'); var stuate = $('.aside__status-text___3dXKm span'); //点击状态stuate.click(function () {selectBox.show();})selectlist.click(function () {selectBox.hide();$(this).parent().prev().find("span").html($(this).html());})</script>先隐藏ul下拉框盒⼦，点击状态时显⽰下拉框，选中列表时把列表的内容传⼊显⽰的状态上，prev()是查找相邻兄弟的前⼀个，find()查找到，html()赋予；。
使用js实现一个可编辑的select下拉列表
使⽤js实现⼀个可编辑的select下拉列表复制代码代码如下:<select id="name" name="name"onkeydown="clearSelect(this,event);"onkeypress="writeSelect(this,event);" style="width:70px;"><option value=""></option><option value="test1">test1</option><option value="test2">test2</option><option value="test3">test3</option></select><script>function clearSelect(obj,e){opt = obj.options[0];opt.selected = "selected";if((e.keyCode== 8) ||(e.charCode==8))//使⽤退格（backspace）键实现逐字删除的编辑功能{opt.value = opt.value.substring(0, opt.value.length>0?opt.value.length-1:0);opt.text = opt.value;}if((e.keyCode== 46) ||(e.charCode==46))//使⽤删除（Delete）键实现逐字删除的编辑功能{opt.value = "";opt.text = opt.value;}//还可以实现其他按键的响应}function writeSelect(obj,e){opt = obj.options[0];opt.selected = "selected";opt.value += String.fromCharCode(e.charCode||e.keyCode);opt.text = opt.value;}function forbidBackSpace()//为了在IE中，避免backspace的返回上⼀页功能，和本下拉框的编辑功能冲突，需要禁掉backspace的功能。
美化select下拉框
ul.tag_options li.open_hover , ul.tag_options li.open_selected{background:#eee;color:#404040; font-weight:normal; font-size:14px}
上面的样式请根据实际情况改写.
$(function(){ $("select").selectCss();
}) </script>
*使用时必须引用jquery
$("select")是选取所有的下拉框,根据自己实际情况更改.
2.调整样式: /*下拉框样式*/ .tag_select,.tag_select_hover,.tag_select_open{display:inline-block;width:130px;height:30px;background:url("../images/sel_bg.png") 120px center no-repeat;padding:0 0 0 15px;line-height:30px;color:#8border:1px solid #dedede}
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>资讯管理</title><script type="text/javascript"src="js/jquery.js" ></script><link rel="stylesheet" type="text/css" href="css/base.css"/><link rel="stylesheet" type="text/css" href="css/common.css"/><style type="text/css">body,div,p{margin: 0px;padding: 0px;font-size: 12px;font-family: "Microsoft Yahei","Verdana",Arial;vertical-align: baseline;color: #333333;/*IE6防抖*/_background-image:url(about:blank);_background-attachment:fixed;}textarea,select,input{border:1px solid #cbd7e0;outline: none;padding-left: 8px;font-family: "Microsoft Yahei";font-size: 12px;color: #333333;}body{background-color: #f1f1f1;}.container{}.content{width: 1050px;border: 1px solid #e6e6e6;background-color: #fff;position: relative;}.title{font-size: 16px;color: #667281;margin-left: 16px;margin-bottom: 10px;}.selec{width: 135px;height: 30px;}/*.content_detail option{display: inline-block;width: 100px;}*/.content input:focus{border: 1px solid #93a5b3;}select:focus{border: 1px solid #93a5b3;}.contentIE6{position: relative;top: 25px;left: 15px;}.content_detail{padding-left: 15px;margin-top: 25px;border-bottom: 1px solid #f2f2f2;_position: relative;_top:5px;_left:15px;}.content_detail div{height: 45px;}.content_detail .subhead{height: 85px;}.subhead{position: relative;}.subhead span{position: relative;top: -45px;}.subheadtext{width: 362px;height: 50px;outline: none;resize: none;padding-top: 8px;}.content .content_detail .subheadIE6{ position: relative;top: 50px;left: 15px;}.content textarea:focus{border: 1px solid #93a5b3;}.content_detail .main{height: 140px;position: relative;}.main span{position: relative;top: -95px;_position: absolute;_top: 15px;_left: 0px;_height:20px;}.maintext{width: 362px;height: 106px;resize: none;padding-top: 8px;_position: absolute;_left: 80px;_top: 0px;}.content_title input{width: 362px;height: 30px;border:1px solid #cbd7e0;}.author input{width: 362px;height: 30px;border:1px solid #cbd7e0;}.auniu{position: relative;}.anniu a{display: inline-block;height: 30px;line-height: 30px;border: 1px solid #dcdcdc;width: 116px;margin-right: 8px;text-align: center;margin-top: 12px;margin-bottom: 12px;position: relative;left: 666px;border-radius: 2px;cursor: pointer;}.preview{background-color: #e6e6e6;}.preview:hover{background-color: #d3d3d3;}.makepage{color: #fff;background-color: #8294be;}.makepage:hover{background-color: #7386b3;}.publish{color: #fff;background-color: #6cc9b6;}.publish:hover{background-color: #5ec0ac;}/*下拉列表框*/.select_p{position: relative;}.select_box{display: inline-block;width: 135px;height: 30px;border: 1px solid #cbd7e0;vertical-align: middle;}.select_box span{display: inline-block;width: 91px;height: 22px;border-right: 1px solid #cbd7e0;vertical-align: top;padding-left: 8px;padding-top: 8px;cursor:default;}.channelhide{position: absolute;display: inline-block;background-color: #fff;width: 99px;border: 1px solid #cbd7e0;border-top: none;top: 32px;left: 88px;z-index: 20;}.channelhide p{cursor: pointer;line-height: 24px;padding-left: 8px;cursor: pointer;}.channelhide p:hover{background-color: #eee;}</style><script type="text/javascript">$(function(){$("#channelhide").hide();$("#programa").hide();var channeldefault=$("#channeldefault").html();$("#channeltext").html(channeldefault);var programadefault=$("#programadefault").html();$("#programatext").html(programadefault);$(document).click(function(e){e = window.event || e; // 兼容IE7obj = $(e.srcElement || e.target);if ($(obj).is("#channelbox,#channelbox *")) {// alert('内部区域');} else {$("#channelhide").hide();}});$(document).click(function(e){e = window.event || e; // 兼容IE7obj = $(e.srcElement || e.target);if ($(obj).is("#programabox,#programabox *")) {// alert('内部区域');} else {$("#programa").hide();}});if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {// $(".ie6_img").attr("src","images/ie6_img.jpg");$("#subhead span").addClass("subheadIE6");$(".content_detail").addClass("contentIE6");}})function channelShowHide(){$("#channelhide").toggle();}function programaShowHide(){$("#programa").toggle();}function selectchannel(node){$("#channelhide").hide();$("#channeltext").html($(node).html());}function selectprograma(node){$("#programa").hide();$("#programatext").html($(node).html());}</script></head><body><div class="container"><p class="title">资讯管理</p><div class="content"><div class="content_detail"><div class="select_p">频道：<span id="channelbox" class="select_box"><span id="channeltext" onclick="channelShowHide()"></span><img onclick="channelShowHide()" src="images/select_img.png"/></span><span id="channelhide" class="channelhide"><p id="channeldefault" onclick="selectchannel(this)">帮助中心</p><p onclick="selectchannel(this)">活动中心</p><p onclick="selectchannel(this)">信息中心</p></span><!-- <select class="selec"><option>活动中心</option><option>活动中心</option><option>活动中心</option></select> --></div><div class="select_p">栏目：<span id="programabox" class="select_box"><span id="programatext" onclick="programaShowHide()">开奖信息</span><img onclick="programaShowHide()" src="images/select_img.png"/></span><span id="programa" class="channelhide"><p id="programadefault" onclick="selectprograma(this)">开奖信息</p><p onclick="selectprograma(this)">开奖奖项</p><p onclick="selectprograma(this)">所有彩票</p></span></div><div class="content_title">标题：<input type="text" value="朝圣之旅开奖01期：xxxx" /></div><div id="subhead" class="subhead"><span>副标题：</span><textarea class="subheadtext">113°46'～114°37'</textarea></div><div class="author">作者：<input type="text"/></div><div>是否有效：<input type="radio" name="valid" value="valid" checked="checked"/>有效<input class="ml30" type="radio" name="valid" value="unvalid"/> 无效</div><div>是否置顶：<input type="radio" name="top" value="valid" checked="checked"/>置顶<input class="ml30" type="radio" name="top" value="unvalid"/>不置顶</div><div>是否显示在首页：<input type="radio" name="show" value="valid" checked="checked"/>显示<input class="ml30" type="radio" name="show" value="valid"/>不显示</div><div class="main"><span>正文：</span><textarea class="maintext"></textarea></div></div><div class="anniu"><a class="preview">预览</a><a class="makepage">生成页面</a><a class="publish">发布到idc</a></div></div></div></body></html>。