去除select下拉框默认样式

去除select下拉框默认样式

select {
/*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
border: solid 1px #000;
/*很关键:将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*将背景改为红色*/
background:red;
/*加padding防止文字覆盖*/
padding-right: 14px;
}
/*清除ie的默认选择框样式清除,隐藏下拉箭头*/
select::-ms-expand { display: none; }
时间: 2024-12-26 04:00:26

去除select下拉框默认样式的相关文章

select 下拉框的样式改变

最近在做地图遇到一个很有意思的事情,就是select下拉框的样式改变 /*第一种,改变下拉框样式*/ select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/ background: url("

select下拉框的样式在浏览器上的兼容问题

最近项目中遇到了自定义下拉框的默认样式在谷歌,火狐,IE上显示不同的问题. 左侧图片就是重写的样式,下拉框的右侧三角是选用的bootstrap里面的图片,通过绝对定位放过去的. css: select { /*Chrome同Firefox与IE里面的右侧三角显示的样式不同*/ border: solid 1px #ddd; /*将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; p

自定义样式的select下拉框

在网上看到了一个写的挺好挺简单的自定义select样式的插件,在理解了它的原理之后,自己也尝试着写了一个. 核心思想:将原来的<select><option></option></select>隐藏掉动态写进页面一个<div>在这里面用<dl><dt><dd>这样的结构代替原来的下拉框. 大概框架:<div class="i_selectbox">//这是用来包裹整个自定义的se

自定义样式的select下拉框深入探索

第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结构来模拟真正的select的操作. 用来模拟select框的div结构如下: <div class="selectbox">//包裹整个模拟框的盒子 <div class="currentselected"></div>//用于当前默

浮动子div撑开父div的几种方法、给select赋值、zoom样式的含义、实现select下拉框readonly

1.浮动子div撑开父div的几种方法: (1)在父div中在添加一个清除浮动的子div<div style=" clear:both;"></div>,该div不设置任何样式,只用来清除浮动 (2)在父div的css样式中设置overflow:hidden;zoom:1; (3)设置父div也为浮动元素float:left:,这样设置的坏处是不能用margin:auto:实现居中 (4)设置父元素display:inline-block;,这样设置的坏处是不能

vue select下拉框绑定默认值

vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一.当没有绑定v-model,直接给对应的option加selected属性 二.当给select绑定了v-model的值的时候,要给v-model绑定的data值里写默认值

模拟select下拉框之多选(数据源采用模拟Ajax数据--原创)

最近需要一个下拉多选,本来想偷懒的,所以在网上百度了一番,最终还是发现没有一个符合自己要求的,所以我自己写了一个插件.下面是GIF动态效果图展示 相信大家已经看到效果了,接下来就是我的代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模拟select下拉框之多选</title> <style

点击select下拉框获取option的属性值

select下拉框作为前端开发者应该是经常使用的,最近在项目中遇到这样的情况,点击下拉框选项,需要获取所点击的option的属性值,当时想很简单啊,给option加一个点击事件不就行了,然后就加了一下,结果一运行悲催了,怎么点击option事件就是不会执行.这是为什么呢,刚开始也不懂,之前没遇到过这样的需求,后来经过学习,才恍然大悟,原来select option没有点击事件,要想获得所选option的属性值,需要通过jquery的change()方法来获取,下面通过代码解释一下,代码如下: <

IE6浏览器下div无法遮盖select下拉框解决方法

IE6浏览器下div无法遮盖select下拉框解决方法:在IE6浏览器下,select下拉框无法被div遮盖,其他的主流浏览器都是正常的.这里简单介绍一下如何解决此问题.默认状态下IE6的表现: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51texiao.cn