自定义select样式

最新推荐文章于 2024-04-08 16:25:01 发布
最新推荐文章于 2024-04-08 16:25:01 发布
阅读量713 收藏
点赞数
分类专栏： html css 文章标签： select 自定义

  • <!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>

  • <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  • <title>Select自定义Select自伸展宽度</title>

  • <style type="text/css">

  • body{background:#CFDFEF;font:12px/150% "Lucida Grande", Arial, Verdana, Helvetica, sans-serif;}

  • .uboxstyle .select_box{width:120px;height:24px;}

  • .uboxstyle div.tag_select,.uboxstyle div.tag_select_hover,.uboxstyle div.tag_select_open,.uboxstyle div.tag_select b,.uboxstyle div.tag_select_hover b,.uboxstyle div.tag_select_open b{background: url(http://i1173.photobucket.com/albums/r595/charrysong/upload/ubox-select.gif) no-repeat;}

  • .uboxstyle div.tag_select,.uboxstyle div.tag_select_hover,.uboxstyle div.tag_select_open,.uboxstyle ul.tag_options li{height:24px;line-height:24px;cursor:pointer;outline: none;padding-left:10px;display:block;color:#79A2BD;width:100px;}

  • .uboxstyle div.tag_select{background-position:0 0;}

  • .uboxstyle div.tag_select_hover{background-position: 0 -24px;}

  • .uboxstyle div.tag_select_open{background-position: 0 -48px;}

  • .uboxstyle div.tag_select b,.uboxstyle div.tag_select_hover b,.uboxstyle div.tag_select_open b{display:block;padding-right:10px;}

  • .uboxstyle div.tag_select b{background-position:right 0}

  • .uboxstyle div.tag_select_hover b{background-position:right -24px;}

  • .uboxstyle div.tag_select_open b{background-position:right -48px;}

  • .uboxstyle ul.tag_options{position:absolute;padding:0;margin:0;list-style:none;width:120px;margin:0;border:2px solid #6d93ab;border-top:none;background:#fff;}

  • .uboxstyle ul.tag_options li{text-decoration:none;}

  • .uboxstyle ul.tag_options li.open_hover{background:#6d93ab;color:#fff}

  • .uboxstyle ul.tag_options li.open_selected{color:#f60}

  • </style>

  • <script type="text/javascript" src="http://www.ok22.org/download/select2css.js"></script>

  • </head>

  • <body>

  • <div class="uboxstyle"><!--包含select的style-->

  • <h3 style="color:#6D93AB;font-size:14px;">自定义下拉框自伸展宽度</h3>

  • <select name="language" id="language">

  • <option value="English" selected="selected">EnglishEnglishEnglish</option>

  • <option value="简体中文" >简体中aaaaa文</option>

  • <option value="日本語" >日本語</option>

  • <option value="Deutsch" >Deutsch</option>

  • <option value="Espa?ol" >Espa?ol</option>

  • <option value="Fran?ais" >Fran?ais</option>

  • <option value="Italiano" >Italiano</option>

  • <option value="Polski" >Polski</option>

  • <option value="Português" >Português</option>

  • <option value="Svenska" >Svenska</option>

  • <option value="Türk?e" >Türk?e</option>

  • <option value="Руccкий" >Руccкий</option>

  • </select>

  • <select name="language2" id="language2">

  • <option value="English" selected="selected">EnglishEnglishEnglish</option>

  • <option value="简体中文" >简体中简体中简体中简体中简体中简体中简体中</option>

  • <option value="日本語" >日本語</option>

  • </select>

  • </div>

  • <div class="">你好啊</div>

  • </body>

  • </html>

  • 如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=402【select 自伸展宽度】幸凡学习网
select自定义样式
09-30
select自定义样式，div+css模拟select下拉框效果，html代码如下： <html <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>div模拟下拉菜单jquery插件</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> body,ul,li{ margin:0; padding:0; font-size:13px;} ul,li{list-style:none;} #divselect{width:186px; margin:80px auto; position:relative; z-index:10000;} #divselect cite{width:150px; height:24px;line-height:24px; display:block; color:#807a62; cursor:pointer;font-style:normal; padding-left:4px; padding-right:30px; border:1px solid #333333; background:url(xjt.png) no-repeat right center;} #divselect ul{width:184px;border:1px solid #333333; background-color:#ffffff; position:absolute; z-index:20000; margin-top:-1px; display:none;} #divselect ul li{height:24px; line-height:24px;} #divselect ul li a{display:block; height:24px; color:#333333; text-decoration:none; padding-left:10px; padding-right:10px;} #divselect ul li a:hover{background-color:#CCC;} </style> [removed][removed] [removed][removed] [removed] $(function(){ $.divselect("#divselect","#inputselect"); }); [removed] </head> <body> <form action="" method="post"> 请选择特效分类 导航菜单 焦点幻灯片 广告代码 网页特效 jquery 特效 <input name="" type="hidden" value="" id="inputselect"/> </form>
移动端自定义select插件Ansel
06-01
1. **重置样式**：Ansel Select可以替代原生的select元素，提供统一的、适应各种手机屏幕的样式，解决了原生选择器样式在不同设备上显示不一致的问题。 2. **触屏友好**：考虑到移动端用户的操作习惯，Ansel Select...
select样式自定义
Mh_ui的博客
03-14 1038
.search{ width: 25%;//定义最外层div的宽度 height:6rem; position: relative; background-image: url(/static/images/job/input.png);//设置div的背景图片 background-repeat:no-repeat; background-si...
自定义select的样式
管子（zero）的杂乱空间
11-17 2288
<!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height = 250;//--><script type="text/javascript"src="
CSS自定义select下拉选择框的样式(不用其他标签模拟)
09-25
本文主要讲述了如何使用纯CSS技术自定义select下拉选择框的样式，目的是覆盖掉浏览器默认的样式。虽然直接使用CSS难以完全解决自定义样式的问题，因为某些浏览器的默认样式在兼容性方面难以处理，但本文还是提供了一...
jquery+html5自定义select样式美化点击动画展开下拉选项菜单特效源码.zip
11-17
这个"jquery+html5自定义select样式美化点击动画展开下拉选项菜单特效源码.zip"就是一个实现此类需求的例子。它利用了jQuery库和HTML5的技术，为传统的HTML `<select>` 元素赋予了更为吸引人的外观和交互效果。 ...
自定义select下拉列表样式
06-12
效果描述： 默认的select下拉列表，很多客户都不太喜欢，当然，也包括我们自己已经看腻了 ... 1、将head中的css样式引入到你的页面中 2、将body中的代码部分拷贝过去即可 (注意保持js路径的正确即可)
select 分组下拉菜单自定义样式
06-07
select 分组下拉菜单 样式，可自定义！
select美化自定义下拉框样式.zip
07-04
select美化自定义下拉框样式是一款基于jquery实现的select美化自定义下拉框样式。
自定义 el-select 和 el-input 样式
虎康的博客
12-04 2709
自定义 选择框的下拉框的样式和输入框。
自定义select样式控件
liuxia666的博客
11-02 2831
背景 该插件是为了在不修改原有项目的基础上通过自定义模板来修改select的样式而设计。 简述 因项目中有很多select下拉选择框，为了不影响其页面结构，表单提交数据和原有js对select的修改，所以设计时采用保留原来的select标签，并添加自定义的下拉选择框样式覆盖select。 使用 该项不是基于jquery的，因此得先引入jquery：
模拟select，自定义样式
最新发布
hflxia的博客
04-08 781
注意：图标采用bootstrap的iconfont 也可以使用其他字体图标 但需要保留i标签结构。option包含四种样式。
Vue中select 标签自定义样式
tengyuxin的博客
08-04 4316
需求原因：我在vue开发中，也会习惯使用各种UI库，但让人难受的是，提供的UI组件的样式难以覆盖，比如我要用的select，我的界面风格是深蓝色的，它的白色背景都不符合需求，要跑到element-plus的样式文件去修改。=》之后，我想，这种简单的组件，我完全可以自己手写，好处可以让我更好的掌握select本身，消除不确定的部分。=》以后，可以直接拿来当组件使用下面就是自己修改出来的样式截图。......
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值