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很多属性样式不好控制;

原文地址:https://www.cnblogs.com/alantao/p/9217555.html

时间: 2024-10-06 09:31:27

select默认下拉箭头改变、option样式清除的相关文章

select自定义下拉三角符号,css样式小细节

本来没有写文章的习惯,但是闲下来了,整理资料,发现还挺纠结,对前端来说.所以整理下,希望对看到的人有所帮助,毕竟我不是前端开发. 起因,是前端告诉我select 框的三角箭头不能自定义.但是第二次的时候,以我自己的感觉中,是可以自己定义的,于是网上找到了这部分资料. 然后自己分享处理吧. 知道大家都喜欢完整的demo,所有直接粘贴吧. <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

清除Css中select的下拉箭头样式

select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/ background: url("http://ourjs.github.io/static/2015/arrow.png")

css清除select的下拉箭头样式

select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/ background: url("http://ourjs.github.io/static/2015/arrow.png")

select change下拉框改变事件

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

HTML中隐藏掉select的下拉箭头

<label class="register-left-item fl">证件号</label>                                    <div class="select select_certificate fl" style="margin-left:4px;">                                        <span class=&

select框默认样式去除(ie中隐藏默认下拉图标)

html代码 1 <select class="info-select"> 2 <option selected="selected">1</option> 3 <option>2</option> 4 </select> css代码 /*清除ie的默认选择框样式清除,隐藏下拉箭头*/ select::-ms-expand { display: none; } .info-select{ wid

css解决select下拉表单option高度的办法

css在给select下拉表单设置样式如边框时可以轻松搞定,而我们在不喜欢其默认的下拉箭头的样式时试图通过background:url(图片路径)来修改之,则往往会出现浏览器的兼容性问题,在网上查了好多资料,最好的解决办法也是大神们用js来模拟下拉表单.额~,好吧,暂且就按照大神们的办法来解决这个问题吧. 下边来说说css如何解决select的option高度的? 有时我们在设置了select的高度后,发现其option的高度还是默认的高度,跟我们设置的select的高度大相径庭,很显然,这不是

用纯css改变select的下拉菜单

select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/ background: url("http://ourjs.github.io/static/2015/arrow.png")

CSS自定义select下拉选择框的样式(不用其他标签模拟)

CSS自定义select下拉选择框的样式(不用其他标签模拟):http://www.jb51.net/css/148841.html CSS美化选择框:http://www.cnblogs.com/shishm/archive/2012/03/02/2376759.html 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5