select 下拉框和下拉列表美化
2016-10-18 13:28
316 查看
以下代码转自 源码爱好者
以下代码转自 开源中国社区
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>select美化自定义下拉框样式</title> </head> <body> <style type="text/css"> *{margin:0;padding:0;} select{outline:none;} ul{list-style:none;} a{text-decoration:none;} select{display: none;} .select_box{font-family: "宋体"; font-size: 12px;color: #999999;width: 178px;line-height: 20px;margin: 50px auto;} .select_showbox{border: 1px solid #b0a296;height: 20px;padding-left: 5px;background: url(/jscss/demoimg/201403/icon.png) no-repeat 156px 0;} .select_option{border: 1px solid #b0a296;border-top: none;display: none;} .select_option li{padding-left: 5px;} .select_option li.selected{background-color: #F3F3F3;color: #999;} .select_option li.hover{background: #7b6959; color: #fff;} </style> <select name="choose" id="choose"> <option value="选择风格" selected="selected">选择风格</option> <option value="复古风">复古风</option> <option value="摇滚风">摇滚风</option> <option value="怀旧风">怀旧风</option> </select> <script type="text/javascript" src="/ajaxjs/jquery-1.7.2.min.js" 4000 ></script> <script type="text/javascript"> (function($){ var selects=$('select');//获取select for(var i=0;i<selects.length;i++){ createSelect(selects[i],i); } function createSelect(select_container,index){ //创建select容器,class为select_box,插入到select标签前 var tag_select=$('<div></div>');//div相当于select标签 tag_select.attr('class','select_box'); tag_select.insertBefore(select_container); //显示框class为select_showbox,插入到创建的tag_select中 var select_showbox=$('<div></div>');//显示框 select_showbox.css('cursor','pointer').attr('class','select_showbox').appendTo(tag_select); //创建option容器,class为select_option,插入到创建的tag_select中 var ul_option=$('<ul></ul>');//创建option列表 ul_option.attr('class','select_option'); ul_option.appendTo(tag_select); createOptions(index,ul_option);//创建option //点击显示框 tag_select.toggle(function(){ ul_option.show(); },function(){ ul_option.hide(); }); var li_option=ul_option.find('li'); li_option.on('click',function(){ $(this).addClass('selected').siblings().removeClass('selected'); var value=$(this).text(); select_showbox.text(value); ul_option.hide(); }); li_option.hover(function(){ $(this).addClass('hover').siblings().removeClass('hover'); },function(){ li_option.removeClass('hover'); }); } function createOptions(index,ul_list){ //获取被选中的元素并将其值赋值到显示框中 var options=selects.eq(index).find('option'), selected_option=options.filter(':selected'), selected_index=selected_option.index(), showbox=ul_list.prev(); showbox.text(selected_option.text()); //为每个option建立个li并赋值 for(var n=0;n<options.length;n++){ var tag_option=$('<li></li>'),//li相当于option txt_option=options.eq(n).text(); tag_option.text(txt_option).css('cursor','pointer').appendTo(ul_list); //为被选中的元素添加class为selected if(n==selected_index){ tag_option.attr('class','selected'); } } } })(jQuery) </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div> </body> </html>
以下代码转自 开源中国社区
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>ADVANCED CSS3 STYLING OF SELECT ELEMENT (DROP-DOWN)</title> <style type="text/css"> /* SELECT W/IMAGE */ select#selectTravelCity { width : 14em; height : 3.2em; padding : 0.2em 0.4em 0.2em 0.4em; vertical-align : middle; border : 1px solid #e9e9e9; -moz-border-radius : 0.2em; -webkit-border-radius : 0.2em; border-radius : 0.2em; box-shadow : inset 0 0 3px #a0a0a0; -webkit-appearance : none; -moz-appearance : none; appearance : none; /* sample image from the webinfocentral.com */ background : url(http://webinfocentral.com/Images/favicon.ico) 95% / 10% no-repeat #fdfdfd; font-family : Arial, Calibri, Tahoma, Verdana; font-size : 1.1em; color : #000099; cursor : pointer; } select#selectTravelCity option { font-size : 1em; padding : 0.2em 0.4em 0.2em 0.4em; } select#selectTravelCity option[selected]{ font-weight:bold} select#selectTravelCity option:nth-child(even) { background-color:#f5f5f5; } select#selectTravelCity:hover { color : #101010; border : 1px solid #cdcdcd; } select#selectTravelCity:focus {box-shadow: 0 0 2px 1px #404040;} /*SELECT W/DOWN-ARROW*/ select#selectPointOfInterest { width : 185pt; height : 40pt; line-height : 40pt; padding-right : 20pt; text-indent : 4pt; text-align : left; vertical-align : middle; box-shadow : inset 0 0 3px #606060; border : 1px solid #acacac; -moz-border-radius : 6px; -webkit-border-radius : 6px; border-radius : 6px; -webkit-appearance : none; -moz-appearance : none; appearance : none; font-family : Arial, Calibri, Tahoma, Verdana; font-size : 18pt; d3ab font-weight : 500; color : #000099; cursor : pointer; outline : none; } select#selectPointOfInterest option { padding : 4px 10px 4px 10px; font-size : 11pt; font-weight : normal; } select#selectPointOfInterest option[selected]{ font-weight:bold} select#selectPointOfInterest option:nth-child(even) { background-color:#f5f5f5; } select#selectPointOfInterest:hover {font-weight: 700;} select#selectPointOfInterest:focus {box-shadow: inset 0 0 5px #000099; font-weight: 600;} /*LABEL FOR SELECT*/ label#lblSelect{ position: relative; display: inline-block;} /*DOWNWARD ARROW (25bc)*/ label#lblSelect::after { content : "\25bc"; position : absolute; top : 0; right : 0; bottom : 0; width : 20pt; line-height : 40pt; vertical-align : middle; text-align : center; background : #000099; color : #fefefe; -moz-border-radius : 0 6px 6px 0; -webkit-border-radius : 0 6px 6px 0; border-radius : 0 6px 6px 0; pointer-events : none; } </style> </head> <body> <br /> <select id="selectTravelCity" title="Select Travel Destination"> <option>New York City</option> <option>Washington DC</option> <option>Los Angeles</option> <option>Chicago</option> <option>Houston</option> <option>Philadelphia</option> <option>Phoenix</option> <option>San Antonio</option> <option>San Diego</option> <option>Dallas</option> <option>San Jose</option> <option>Austin</option> </select> <br /> <br /> <label id="lblSelect"> <select id="selectPointOfInterest" title="Select points of interest nearby"> <option>caffe</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>
相关文章推荐
- JS+CSS和图片美化下拉列表选择框(select)
- 用JavaScript来美化HTML的select标签的下拉列表效果
- 用JavaScript来美化HTML的select标签的下拉列表效果
- [置顶] select 下拉列表选择框效果及美化(before 和 :after伪元素的妙用)
- 巧用css美化select下拉列表 更换下拉箭头
- 深入理解 CSS 的 :before 和 :after 选择器(制作select下拉列表美化插件)
- css美化select下拉列表(更换下拉箭头)的方法
- ‘select’的使用:下拉列表分组显示
- 美化的select下拉框
- Robotframework之下拉列表select
- JS列表的下拉菜单组件(仿美化控件select)
- Select 下拉列表选择插件 (包含下拉选择图片,下拉grid等)
- JS + CSS 美化 select 下拉框表单
- JAVA EE 项目经常使用知识 之AJAX技术实现select下拉列表联动的两种使用方法(让你真正理解ajax)
- 给select2 jQuery下拉条select美化及功能扩展插件增加拼音筛选功能
- JAVA EE 项目常用知识 之AJAX技术实现select下拉列表联动的两种用法(让你真正理解ajax)
- CSS3 中关于 select 下拉列表的样式
- 实现html中select下拉列表中部分选项不可选
- jquery实现select下拉框美化特效代码分享
- 关于angularjs的select下拉列表存在空白的解决办法