select样式的重写

select {

/*统一边框*/

border: solid 1px #000;

/*将默认的select选择框样式清除*/

appearance:none;//这个样式就是清楚他的下拉按钮的默认样式

-moz-appearance:none;

-webkit-appearance:none;

/*替换选择框的最右侧显示小箭头图片*/

background: url("http://****.png") no-repeat scroll right center transparent;

/*为下拉小箭头留出一点位置，避免被文字覆盖*/

padding-right: 14px;

}

/*清除ie的默认选择框样式清除，隐藏下拉箭头*/

select::-ms-expand { display: none; }

时间： 2024-12-14 21:56:17

select样式的重写的相关文章

通过css属性hack完成select样式美化，并兼容IE

最近在重构时遇到了select样式问题,并且需要在不影响语义化的情况下,兼容IE8. 经过一番的百度后始终没有找到合适的纯CSS解决方案,最后换了一下思路,大胆使用了属性hack: 在chrome和FF下隐藏默认样式,显示css自定义样式,在ie下隐藏自定义样式,显示默认样式. DOM代码如下: <select name=""> <option value=""></option> </select> CSS样式如下:

CSS select样式优化含jquery代码

CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> <label>请选择您所在的城市</label> <select class="select" name="" id="c_city"> <option value="0">请选择您所在的

IE、火狐、谷歌浏览器下兼容统一select样式

项目开发时,对于不同浏览器下的select样式不统一问题,各种查,这里记录一下,项目已使用 IE浏览器下样式: 火狐浏览器下样式: 谷歌浏览器下样式: 上代码: 1.html 2.css 至此,大功告成!

自定义select样式

自定义select样式,下面是CSS代码,主要是那个 appearance 样式 select { width: 220px; margin-left: 12px; padding-left: 12px; height: 31px; line-height: 31px; font-size: 12px; color: #333; appearance: none; -webkit-appearance: none; -ms-appearance: none; -moz-appearance: n

修改select样式

CSS就可以解决,原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可. select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/ background: ur

select样式美化

首先对于默认的样式: 刚开始想到使用背景,但经试验对select设置背景是无效的,于是后来就想到了覆盖,用其它元素把那个向下的箭头盖住,然后给这个元素设置背景,写了个demo发现可行,于是就有了下面的这些. 首先用一个a标签套住select: 复制代码代码如下: <a class="btn-select" id="btn_select"> <select> <option>选项一</option> <optio

修改 IOS 默认input / select 样式

在做页面的时候发现,给 select 加样式的时候而我想要的是 ios 是有自己的默认样式的. 通过查资料知道 -webkit-appearance:none: 加上这行代码之后虽然还不是很完美,但是小箭头可以通过背景图片来搞. 但是没有加之前在微信开发者工具中是正常的, 安卓也是正常的.

select样式清除

ie select::-ms-expand{ display:none;} 火狐和谷歌 select { appearance: none; -moz-appearance: none; -webkit-appearance: none; background: transparent;} 清除option的样式同select,可参考. 禁止点击为 <select disabled="disabled"></select> <!DOCTYPE ht

IE10修改select样式

一般我们针对webkit内核的,都使用-webkit-appearance来控制一些表单元素. 但是IE10如何来控制呢? select::-ms-expand{display:none;}