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 相关文章推荐
jQuery读取和设定KindEditor值的方法
Nov 22 Javascript
javascript中attribute和property的区别详解
Jun 05 Javascript
JavaScript中的substr()方法使用详解
Jun 06 Javascript
javascript实现判断鼠标的状态
Jul 10 Javascript
原生js封装二级城市下拉列表的实现代码
Jun 16 Javascript
vue.js的提示组件
Mar 02 Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
JavaScript中如何判断一个值的类型
Sep 15 Javascript
详解小程序退出页面时清除定时器
Apr 28 Javascript
javascript中undefined的本质解析
Jul 31 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 Javascript
vue-cli3单页构建大型项目方案
Apr 07 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
php开启安全模式后禁用的函数集合
2011/06/26 PHP
PHP __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
PHP生成图片验证码、点击切换实例
2014/06/25 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
php封装的验证码类分享
2017/02/26 PHP
特殊字符、常规符号及其代码对照表
2006/06/26 Javascript
jquery.ui.draggable中文文档
2009/11/24 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
vue生命周期与钩子函数简单示例
2019/03/13 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
Python3实现的简单验证码识别功能示例
2018/05/02 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
超实用的 30 段 Python 案例
2019/10/10 Python
如何使用python代码操作git代码
2020/02/29 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
python调用摄像头的示例代码
2020/09/28 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
简述数组与指针的区别
2014/01/02 面试题
临床医师专业个人自我评价范文
2013/11/07 职场文书
工程建设实施方案
2014/03/14 职场文书
医院标语大全
2014/06/23 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书
古诗之感恩老师
2019/10/24 职场文书
Golang 对es的操作实例
2022/04/20 Golang