当前位置: 首页 > news >正文

html select 加入css样式,css为select添加样式(无脚本)实现

改变select默认的样式,一般情路情况下通过ul,li来模拟来实现。

有很多Jquery插件就是通过这样的方式来改变select默认样式的。

根据程序哥哥那边的反映,此种方式在form提交后无法获取数据,后来经过实验,用了不同的JS/Jquery插件,都是同样的结果:无法获取数据。

后来看一篇外国人写的 博客,用css的样式来实现 在select外面添加一个div,设置select的宽度小于父级div的宽度,然后通过设置div的background属性,改变select默认箭头的样式。

此种方法不失为一个好方法,不写脚本,只用单纯的css来实现。

不过这种方法也是有瑕疵的,就是在IE系列下,选中某个选项的时候会有背景色块,IE7-IE10都有此bug。

在Opera下,设置div的背景图不显示,也就是select的下拉箭头不显示,这个不知道是什么原因所致。

以下代码

复制代码

代码如下:

AAAAAAAAAAA

BBBBBBBBBBB

CCCCCCCCCCC

DDDDDDDDDDD

复制代码

代码如下:

.select_style {width:240px; height:30px; overflow:hidden; background:url(../images/arrow.png) no-repeat 215px;

border:1px solid #ccc;

-moz-border-radius: 5px; /* Gecko browsers */

-webkit-border-radius: 5px; /* Webkit browsers */

border-radius:5px;

}

.select_style select { padding:5px; background:transparent; width:268px; font-size: 16px; border:none; height:30px;

-webkit-appearance: none; /*for Webkit browsers*/

}

相关文章:

  • 计算机基础知识(单选题),计算机基础知识单选题
  • 桌面上计算机删除后怎么复原,电脑桌面上出现一个图标,删掉后重启桌面又恢复了?怎么才能彻底删除?...
  • 计算机日常维护小知识,计算机日常维护小常识
  • html5按钮组水平均分,ichart.js绘制虚线、平均分虚线效果的实现代码_javascript技巧...
  • 学计算机可以考统计师吗,统计师如何备考呢?
  • html 发光字,介绍几种常见发光字的制作步骤方法
  • html中元相关元素包括,tabs_panels.html
  • 计算机专业论文周进展300字,毕业设计周进展记录模板
  • 计算机网络第3班第六章,计算机网络教程第3版彭澎第6章J课件教学.ppt
  • 计算机二级数据透视图教程,计算机二级语言数据透视表做法
  • 计算机语言符号通配符,day 15 通配符和特殊符号
  • 计算机类英文参考文献,计算机英文参考文献.doc
  • 北京化工大学计算机组成原理考试,2017年北京化工大学信息科学与技术学院408计算机学科专业基础综合之计算机组成原理考研仿真模拟题...
  • 柱面是什么计算机组成原理,计算机组成原理
  • 英语教学计划软件测试,第一学期英语教学计划
  • “大数据应用场景”之隔壁老王(连载四)
  • 10个最佳ES6特性 ES7与ES8的特性
  • android高仿小视频、应用锁、3种存储库、QQ小红点动画、仿支付宝图表等源码...
  • CentOS 7 防火墙操作
  • fetch 从初识到应用
  • input实现文字超出省略号功能
  • JAVA之继承和多态
  • MYSQL如何对数据进行自动化升级--以如果某数据表存在并且某字段不存在时则执行更新操作为例...
  • SpiderData 2019年2月16日 DApp数据排行榜
  • SpiderData 2019年2月25日 DApp数据排行榜
  • Vue学习第二天
  • 收藏好这篇,别再只说“数据劫持”了
  • 我感觉这是史上最牛的防sql注入方法类
  • 以太坊客户端Geth命令参数详解
  • 用quicker-worker.js轻松跑一个大数据遍历
  • 远离DoS攻击 Windows Server 2016发布DNS政策
  • ​ ​Redis(五)主从复制:主从模式介绍、配置、拓扑(一主一从结构、一主多从结构、树形主从结构)、原理(复制过程、​​​​​​​数据同步psync)、总结
  • ​sqlite3 --- SQLite 数据库 DB-API 2.0 接口模块​
  • #define
  • #HarmonyOS:Web组件的使用
  • #我与Java虚拟机的故事#连载06:收获颇多的经典之作
  • $(document).ready(function(){}), $().ready(function(){})和$(function(){})三者区别
  • (¥1011)-(一千零一拾一元整)输出
  • (k8s中)docker netty OOM问题记录
  • (阿里云万网)-域名注册购买实名流程
  • (没学懂,待填坑)【动态规划】数位动态规划
  • (四)图像的%2线性拉伸
  • ***测试-HTTP方法
  • .NET Core SkiaSharp 替代 System.Drawing.Common 的一些用法
  • .NET Framework杂记
  • .NET 发展历程
  • .NET 中使用 TaskCompletionSource 作为线程同步互斥或异步操作的事件
  • .NET/C# 使用反射注册事件
  • .NET实现之(自动更新)
  • ::
  • @ConditionalOnProperty注解使用说明
  • [AutoSar]状态管理(五)Dcm与BswM、EcuM的复位实现
  • [C]整形提升(转载)
  • [cocos creator]EditBox,editing-return事件,清空输入框
  • [Editor]Unity Editor类常用方法