html表单 select多选下拉箭头的问题
来源:互联网 发布:stringtokenizer java 编辑:程序博客网 时间:2024/06/02 05:06
开发中碰到 需要使用表单多选标签select,但是需求是自带酷炫的外框,而且下拉箭头不能用原生的。首先是初始化select标签,清除原生的边框样式:border:none;outline-style:none;去掉原生箭头然后模拟箭头{appearance:none;-moz-appearance:none;-webkit-appearance:none;},一般需要加上前缀,有兼容问题。
然后放上自定义的下拉图标,可以是图片或者背景图,但是背景图必须留下位置 ,以防字体遮住图标:padding-right:14px;最后还有一个问题:如果是定位的一个图片在这里的话,单纯点击这个下拉箭头时,不会出现下拉框。尤其是下拉图标很大时,很多人会不由自主的去点击这个图标,但是因为是模拟的假的图标,所以不会触发下拉事件。此时需要另一个css属性:pointer-events:none.这个属性的用处是:阻止元素成为鼠标事件目标。取消图片的默认事件,这样点击这里就可以弹出下拉框,正常显示了。
阅读全文
0 0
- html表单 select多选下拉箭头的问题
- 无下拉箭头的Select
- 无下拉箭头的SELECT下拉选框
- html:表单有select的都是下拉表单
- select下拉箭头样式改变问题
- 修改select右侧的下拉箭头样式
- select自定义下拉箭头
- css美化select下拉列表(更换下拉箭头)的方法
- 解决select右侧下拉箭头在ios上不兼容的问题
- 转载:解决html的select(下拉框)宽度问题
- 关于HTML中select下拉框的取值问题
- 清除Css中select的下拉箭头样式
- 如何去除ie的select下拉框箭头图标
- CSS怎么去掉select的下拉箭头样式(转)
- 清除Css中select的下拉箭头样式
- 隐藏select边框及下拉箭头方法
- css清除select默认下拉箭头
- html下拉表单
- 刚开始是windows10+ubuntu16.04,后来将win10换成win7,添加原ubuntu的引导
- leveldb——leveldb入门篇之Linux下编译配置和使用
- jquery + append 弹框 + disabled 的按钮属性
- Android CMake 编译so库
- python Thread类解析(一)
- html表单 select多选下拉箭头的问题
- linux结构化命令:if-then
- 【Aizu-ALDS1_7_B】Binary Trees 树 (4/1000)
- Java8简明指南
- C++ 中vector的使用方法
- 基于Netty的长连接客户端
- wireshark混杂模式
- content字符编码
- mongodb的介绍、原理以及使用场景