select,option清楚默认样式

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

原文地址:https://www.cnblogs.com/kingchan/p/9378941.html

时间: 2024-10-17 21:31:40

select,option清楚默认样式的相关文章

用纯css改变下拉列表select框的默认样式(转)

用纯css改变下拉列表select框的默认样式 分享到 分类 JS学习   关键字 前端   发布 kris  2015-04-01 注意 转载须保留原文链接,译文链接,作者译者等信息. 在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计. 一切看起来很好,很正常,直到你看到他/她设计的一个选择下拉框跟浏览器默认提供的样式有些不同!你说:“这没

改变form里面input,textarea.select等的默认样式

因为在项目中有时候需要照顾到整体的色调问题,所以不得不对表单默认的样式进行更改,以下只是对input里的文本颜色做了更改. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> input::-webkit-input-placeholder, texta

[转载]用纯css改变下拉列表select框的默认样式

在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计. 一切看起来很好,很正常,直到你看到他/她设计的一个选择下拉框跟浏览器默认提供的样式有些不同!你说:“这没办法做!你应该不会抱怨设计师,其实更改下拉输入的默认样式并不是非常难的! Mobile 和现代浏览器的解决方案 下面是解决方案. 我们看到默认的下载选择框在firefox和chrome中是

用纯css改变下拉列表select框的默认样式(不兼容IE10以下)

在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计. 一切看起来很好,很正常,直到你看到他/她设计的一个选择下拉框跟浏览器默认提供的样式有些不同!你说:“这没办法做!你应该不会抱怨设计师,其实更改下拉输入的默认样式并不是非常难的! 下面是解决方案. 我们看到默认的下载选择框在firefox和chrome中是有些不同的 Chrome 和 Firefox 中分

select标签的默认样式修改

在项目中,用到select标签,需要对select标签自定义样式. 在chrome浏览器中会对select有一个默认的border-radius,并且无法去掉. 可以通过下面的方法来解决: 1.需要通过下面的css才能修改select的border-radius .select { -webkit-appearance: none; -webkit-border-radius: 0px; } 但是这个方法会让select自带的三角箭头消失. 可以通过background来设置一个背景三角箭头来解

用纯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.p

select option选中默认selected

<select id="selectId" name="dengji"> <option value="c10">c10</option> <option value="c15">c15</option> <option value="c20">c20</option> <option value="c25&

修改select默认样式,兼容IE9

前面有篇文章已经提供了如何修改select标签的默认样式,但是只能兼容到ie10,要兼容ie9只能模拟一个类似的 html结构: <div class="select_diy"> <select> <option value="产品咨询1">产品咨询1</option> <option value="产品咨询2">产品咨询2</option> <option value

纯css修改下拉列表select的默认样式

select的一些默认样式我们很难修改,比如图标的替换.接下来就说说如何修改这些默认样式: html代码: <div> <select name=""> <option value="芝士">芝士</option> <option value="奶油">奶油</option> </select> </div> 给select添加父元素div目的是为了,