select自定义小三角样式代码(实用总结)


Posted in Javascript onAugust 18, 2017

这段代码是网上大部分的解决办法,在这里总结一下:

让select透明,上面加一个span,来替换select框,可以自定义小三角样式,也可以做出select文字居中的效果。

<div class="ui-select">
     <span>使用加息券或现金券 <i class="icon-down lMar10"></i></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>
.ui-select{
 width:75%;
 height:63px;
 line-height:63px;
 background-color:#ECAFB4;
 color:#fff;
 padding:0 30px;
 text-align: left;
 position: relative;
}
select{
 width:100%;
 height:63px;
 line-height:33px;
 opacity: 0;
 position: absolute;
 top:0;
 left:0;
}

/*小三角图标*/
.icon-down{
 display: inline-block;
 width:30px;
 height:16px;
 background: url("../image/newWap/wapIcons.png") -168px -96px no-repeat;
}
$(".ui-select select").change(function(){
  $(this).prev("span").html($(this).find("option:selected").val()+'<i class="icon-down lMar10"></i>');
})
//select监测option的值的变化,添加到span中

显示效果如图:

select自定义小三角样式代码(实用总结)

 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持!

Javascript 相关文章推荐
JavaScript 语言基础知识点总结(思维导图)
Nov 10 Javascript
JS记录用户登录次数实现代码
Jan 15 Javascript
JQuery中操作Css样式的方法
Feb 12 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
BootStrap创建响应式导航条实例代码
May 31 Javascript
jquery点击展示与隐藏更多内容
Dec 03 Javascript
微信小程序 合法域名校验出错详解及解决办法
Mar 09 Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
Jun 25 Javascript
Angular4学习之Angular CLI的安装与使用教程
Jan 04 Javascript
原生JS生成指定位数的验证码
Oct 28 Javascript
原生js实现自定义滚动条
Jan 20 Javascript
js使用highlight.js高亮你的代码
Aug 18 #Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 #Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 #Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
Aug 18 #Javascript
移动设备手势事件库Touch.js使用详解
Aug 18 #Javascript
JavaScript你不知道的一些数组方法
Aug 18 #Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 #Javascript
You might like
Laravel 5框架学习之环境与配置
2015/04/08 PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
Prototype Date对象 学习
2009/07/12 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
AngularJs html compiler详解及示例代码
2016/09/01 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
js实现简易垂直滚动条
2017/02/22 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
Python中用altzone()方法处理时区的教程
2015/05/22 Python
python中解析json格式文件的方法示例
2017/05/03 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
python Web开发你要理解的WSGI &amp; uwsgi详解
2018/08/01 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
波兰在线杂货店:Polski Koszyk
2019/11/02 全球购物
竞选文艺委员演讲稿
2014/04/28 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书