select默认下拉箭头改变、option样式清除
谷歌、火狐、ie下 select 的默认下拉箭头图标差别还是比较大,一般我们都会清除默认样式,重新设计箭头图标;
- /* --ie清除--*/
- select::-ms-expand{ display: none; }
- /* --火狐、谷歌清除--*/
- select{
- appearance:none;
- -moz-appearance:none;
- -webkit-appearance:none;
- background: url("arrow.png") no-repeat scroll right center transparent;
- padding-right: 14px;
- }
- /* --箭头就用自己设计的箭头,padding 空出箭头的位置--*/
option样式的简单清除
- option::-ms-expand{ display: none; }
- option{
- -moz-appearance:none; /* Firefox */
- -webkit-appearance:none; /* Safari 和 Chrome */
- appearance:none;
- }
- /* --背景色字体颜色--*/
- option:hover{
- color:#fff;
- background-color:#1E90FF;
- }
//这些可以简单的解决一些问题,如果要求美观,就用ul,li等写吧,option很多属性样式不好控制;
select默认下拉箭头改变、option样式清除的更多相关文章
- select自定义下拉三角符号,css样式小细节
本来没有写文章的习惯,但是闲下来了,整理资料,发现还挺纠结,对前端来说.所以整理下,希望对看到的人有所帮助,毕竟我不是前端开发. 起因,是前端告诉我select 框的三角箭头不能自定义.但是第二次的时 ...
- select change下拉框改变事件 设置选定项,禁用select
select change下拉框改变事件 设置选定项,禁用select 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...
- 怎么去掉select的下拉箭头和输入框input类型为number时的上下箭头
一.去掉select的下拉箭头 方法一:在select外面加一个div,设置select宽度大于div的宽度,并加一个超出隐藏属性overflow:hidden,小三角会隐藏掉: 方法二:给selec ...
- select下拉箭头改变,兼容ie8/9
各个浏览器下select默认的下拉箭头差别较大,通常会清除默认样式,重新设计 <html> <head> <meta charset="utf-8"& ...
- css清除select的下拉箭头样式
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- 清除Css中select的下拉箭头样式
select {/*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/appeara ...
- 如何修改select标签的默认下拉箭头样式?
对于一般的项目而言,select标签在浏览器中表现出来的默认样式也不算丑,但是一次项目中,项目经理却要求对select标签本身进行样式修改,美化其下拉小箭头的样式.我思考和尝试了许多方法,最终得到一种 ...
- select框默认样式去除(ie中隐藏默认下拉图标)
html代码 <select class="info-select"> <option selected="selected">1< ...
- 将select的默认小三角替换成别的图片,且实现点击图片出现下拉框选择option
最近做项目,要求修改select下拉框的默认三角样式,因为它在不同浏览器的样式不同且有点丑,找找网上也没什么详细修改方法,我就总结一下自己的吧. 目标是做成下图效果: 图一:将默认小三角换成红圈的三角 ...
随机推荐
- Maven Missing artifact jar
maven error:Multiple annotations found at this line: - Missing artifact log4j:log4j:jar:1.2.15:compi ...
- vue的手机端框架mint-ui头部header组件实现返回到上一个浏览页面
<mt-header title="中文号主页" fixed> <router-link to="" slot="left" ...
- jquery获取表单数据方法$.serializeArray()获取不到disabled的值
$.serializeArray()获取不到disabled的值 经实验,$.serializeArray()获取不到disabled的值,如果想要让input元素变为不可用,可以把input设为re ...
- 使用java启动mybatis generator
1.java工程目录结构: |src/main/java |com.leslie.mybatis.generator |MybatisGeneratorUtil.java |src/main/reso ...
- LINQ to Entities does not recognize the method 'Int32 ToInt32(System.String)' method, and this method cannot be translated into a store expression
if (!string.IsNullOrEmpty(FarmWorkId)) { data = data.Where(p => p.TypeId == Convert.ToInt32(FarmW ...
- NHibernate 数据查询之Linq to NHibernate
刚学NHibernate的时候觉得,HQL挺好用的,但是终归没有与其他技术相关联,只有NHibernate用到,一来容易忘记,二来没有智能提示,排除错误什么的都不给力,直到看到一个同事用Linq to ...
- Linux Top命令详解(载自百度经验)
Linux系统可以通过top命令查看系统的CPU.内存.运行时间.交换分区.执行的线程等信息.通过top命令可以有效的发现系统的缺陷出在哪里.是内存不够.CPU处理能力不够.IO读写过高. 1 使用S ...
- 常用CSS备忘
1 怎样让div中的img居中 水平居中:div设置:text-align:center; img设置:width:图片宽度; margin:0 auto; 垂直居中:div设置:position:r ...
- Dubbo -- 系统学习 笔记 -- 示例 -- 静态服务
Dubbo -- 系统学习 笔记 -- 目录 示例 想完整的运行起来,请参见:快速启动,这里只列出各种场景的配置方式 静态服务 有时候希望人工管理服务提供者的上线和下线,此时需将注册中心标识为非动态管 ...
- mongodb 关闭服务器
./mongo use admin db.shutdownServer() 啦啦啦