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下拉框的默认三角样式,因为它在不同浏览器的样式不同且有点丑,找找网上也没什么详细修改方法,我就总结一下自己的吧. 目标是做成下图效果: 图一:将默认小三角换成红圈的三角 ...
随机推荐
- .OFF 格式文件
转载:http://blog.sina.com.cn/s/blog_643634b80102v166.html 物体文件格式(.off)文件通过描述物体表面的多边形来表示一个模型的几何结构,这里的多边 ...
- TensorFlow:tf.contrib.layers.xavier_initializer
xavier_initializer( uniform=True, seed=None, dtype=tf.float32 ) 该函数返回一个用于初始化权重的初始化程序 “Xavier” .这个初始化 ...
- Xcode: Show Bounds Rectangles for UIView in Interface Builder
选中一个 Xib 文件,然后依次选择菜单中的 Editor - Canvas - Show Bounds Rectangles
- react-router实现tab页面切换,并解决选中样式首页始终选中问题
import React, {Component} from 'react'; import { BrowserRouter as Router, Route, NavLink } from &quo ...
- Asp.net mvc怎么在razor里写js代码
我试图在Razor里写JS代码,但是不行 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 3 ...
- 针对降质模型中的模糊SR
(PDF) Deep Plug-and-Play Super-Resolution for Arbitrary Blur Kernels https://www.researchgate.net/pu ...
- 关于Android中Animation的停止【转载】
转载自:http://blog.csdn.net/easonx1990/article/details/8231520 最近遇到一个需求,通过在GridView上改变焦点,并且GridView上每个i ...
- linux-ubuntu14.04以下使用gdb出现的问题
问题: (gdb) list 没有符号表被读取. 请使用 "file" 命令. 原因事实上说的比較清楚,可运行文件里没有符号表,为什么会没有符号表呢.由于符号表是在编译过程中使用的 ...
- graphicsmagick常用命令
显示图像文件详细信息 gm identify a.jpg 1.更改当前目录下.jpg的尺寸大小,并保存于目录.thumb里面 gm mogrify -output-directory .thumbs ...
- python BeautifulSoup库用法总结
1. Beautiful Soup 简介 简单来说,Beautiful Soup是python的一个库,最主要的功能是从网页抓取数据.官方解释如下: Beautiful Soup提供一些简单的.pyt ...