<select>在chrome浏览器下背景透明问题
在上篇文章《只用CSS美化选择框》运用了背景透明的技巧来美化选择框，但在chrome浏览器下遇到了跟ie、ff不一样的透明效果，下面重现一下：
在一个大的div(背景红色)内放置一个select元素（背景透明）。在线查看（可在不同浏览器中查看效果）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>chrome浏览器下select元素透明问题</title>
</head>
<body>
<div style="width: 200px; height: 200px; background: red">
<select style="background: transparent;"><!--微信浏览器是可以的-->
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>
</body>
</html>
我们期望的效果如图：
但chrome浏览器却是这样子的
问题不言而喻了，chrome居然没有按照bacground:tansparent的指令行事，好吧，我认为它是另类，给它一个偏方-webkit-appearance: none;（取消webkit默认的样式）试试！修改后代码在线效果 查看
确实透明了，但是好像默认的下拉小箭头也透明了（严格来说应该是消失了），stackoverflow上也有相关问题
http://stackoverflow.com/questions/4142619/how-to-make-select-element-be-transparent-in-chrome
总结：webkit内核浏览器（chrome、safari）有自己的默认样式，针对webkit核心的浏览器使用-webkit-appearance: none让select背景透明；这好像不完美，下拉箭头没了，我也没找到完美的方法——既能背景透明又能不失去那个下拉箭头。推荐《只用CSS美化选择框》来实现自定义的select框吧！
有完美的方法，请告知一声，谢谢！
原文地址：http://www.cnblogs.com/shishm/archive/2012/03/02/2377354.html
<select>在chrome浏览器下背景透明问题的更多相关文章
- 一个解决chrome浏览器下input标签当autocomplete的时候背景变黄色同时input背景图片消失方案
最近在改一个bug即如标题所讲的一样,chrome浏览器下当input标签开启autocomplete的时候input的背景颜色变黄同时在input的背景图片也被覆盖了.为此百度了好久发现网上说的使用 ...
- Chrome浏览器下自动填充的输入框背景
记录下从张鑫旭老师的微博中看到关于input输入框的属性 1.autocomplete="off" autocomplete 属性规定输入字段是否应该启用自动完成功能 自动完成允许 ...
- 取消chrome浏览器下input和textarea的默认样式
最近一个细节引起了我的注意,chrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框,而且textarea还可以任意拖动放大,这是不能容忍的,影响美观不说,有时候拖动texta ...
- 取消chrome浏览器下input和textarea的默认样式；html5默认input内容清除“×”按钮去除办法
取消chrome浏览器下input和textarea的默认样式: outline:none;/*清空chrome中input的外边框*/ html5默认input内容清除“×”按钮去除办法: inpu ...
- chrome浏览器下页面顶部出现一条空白解决
最近遇到页面在chrome浏览器下,顶部会出现一条空白的问题.后来知道是bom头的问题. 1.什么是bom头? BOM签名的意思就是告诉编辑器当前文件采用何种编码,方便编辑器识别,但是BOM虽然在编辑 ...
- chrome浏览器的跨域设置 Google Chrome浏览器下开启禁用缓存和js跨域限制--disable-web-security
chrome用户默认路径 Win7:C:\Users\[用户名]\AppData\Local\Google\Chrome\User Data\XP:C:\Documents and Settings\ ...
- chrome浏览器下的xdebug helper使用方法
chrome浏览器下的xdebug helper使用方法 自从安装了xdebug后,发现每次调试都需要从eclipse中先从头启动,然后一步步走到你要调试的页面,而不是说想什么时候调试就什么时 ...
- button 在chrome浏览器下被点击时会出现一个橙色的边框
问题描述: button在chrome浏览器下被点击时会出现一个橙色的边框 在button上添加 :focus{outline:none;}也无法解决. 解决办法: 在button上添加 :focus ...
- Chrome浏览器下调试SASS
网上说的方案各有各的说法,尝试多个才找到有效方案,为避免后来者麻烦,现在讲讲如何调试 笔者ruby版本为3.4.19,因为sass文件的编译是需要ruby环境的,使用sass前需要先安装! 第一步(核 ...
随机推荐
- 转:Java NIO系列教程(九) Pipe
Java NIO 管道是2个线程之间的单向数据连接.Pipe有一个source通道和一个sink通道.数据会被写到sink通道,从source通道读取. 这里是Pipe原理的图示: 创建管道 通过Pi ...
- js控制固定div和随屏滚动div兼容多浏览器和纯css控制（来自网络）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- git windows中文目录乱码问题解决
转自:http://blog.chinaunix.net/uid-9789774-id-3080448.html Git的Windows版本Msysgit对中文的支持不够好 当使用时,会出现以下三种情 ...
- 错误 X “X1”不包含“XX2”的定义，并且找不到可接受类型为“X1”的第一个参数的扩展方法“XX2”(是否缺少 using 指令或程序集引用?)
由于我是复制其他.cs文件的代码··· 出错了·搜了一下解决方法··· 但是不适用···· 个人出错原因: 忘了在.cs文件的刚开始(即:using xx:后) namespace aaa.bb { ...
- Ubuntu nginx: [emerg] bind() to 0.0.0.0:80 failed (13: Permission denied)
在Ubuntu 12中启动刚安装好的Nginx,报错: nginx: [emerg] bind() to 0.0.0.0:80 failed (13: Permission denied) 原因如下: ...
- SELinux入门
导读 如果你在之前的Linux生涯中都禁用或忽略了SELinux,这篇文章就是专门为你写的:这是一篇对存在于你的Linux桌面或服务器之下的SELinux系统的介绍,它能够限制权限,甚至消除程序或守护 ...
- 十条nmap常用的扫描命令
NMap也就是Network Mapper,nmap是在网络安全渗透测试中经常会用到的强大的扫描器,功能之强大,不言而喻.下面介绍一下它的几种扫描命令.具体的还是得靠大家自己学习,因为实在太强大了. ...
- Unity3d 去掉exe版本的边框
原地址:http://blog.sina.com.cn/s/blog_697b1b8c0101gd4h.html using System; using System.Runtime.InteropS ...
- error LNK2038: 检测到“_ITERATOR_DEBUG_LEVEL”的不匹配项:值“0”不匹配值“2”
error: vtkCommon.lib(vtkSmartPointerBase.obj) : error LNK2038: 检测到“_ITERATOR_DEBUG_LEVEL”的不匹配项:值“0”不 ...
- hiho #1272 买零食 [Offer收割]编程练习赛2
#1272 : 买零食 时间限制:5000ms 单点时限:1000ms 内存限制:256MB 描述 小Ho很喜欢在课间去小卖部买零食.然而不幸的是,这个学期他又有在一教的课,而一教的小卖部姐姐以冷若冰 ...