在上篇文章《只用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/2226666/background-image-for-select-dropdown-does-not-work-in-chrome

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浏览器下背景透明问题的更多相关文章

  1. 一个解决chrome浏览器下input标签当autocomplete的时候背景变黄色同时input背景图片消失方案

    最近在改一个bug即如标题所讲的一样,chrome浏览器下当input标签开启autocomplete的时候input的背景颜色变黄同时在input的背景图片也被覆盖了.为此百度了好久发现网上说的使用 ...

  2. Chrome浏览器下自动填充的输入框背景

    记录下从张鑫旭老师的微博中看到关于input输入框的属性 1.autocomplete="off" autocomplete 属性规定输入字段是否应该启用自动完成功能 自动完成允许 ...

  3. 取消chrome浏览器下input和textarea的默认样式

    最近一个细节引起了我的注意,chrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框,而且textarea还可以任意拖动放大,这是不能容忍的,影响美观不说,有时候拖动texta ...

  4. 取消chrome浏览器下input和textarea的默认样式；html5默认input内容清除“×”按钮去除办法

    取消chrome浏览器下input和textarea的默认样式: outline:none;/*清空chrome中input的外边框*/ html5默认input内容清除“×”按钮去除办法: inpu ...

  5. chrome浏览器下页面顶部出现一条空白解决

    最近遇到页面在chrome浏览器下,顶部会出现一条空白的问题.后来知道是bom头的问题. 1.什么是bom头? BOM签名的意思就是告诉编辑器当前文件采用何种编码,方便编辑器识别,但是BOM虽然在编辑 ...

  6. chrome浏览器的跨域设置 Google Chrome浏览器下开启禁用缓存和js跨域限制--disable-web-security

    chrome用户默认路径 Win7:C:\Users\[用户名]\AppData\Local\Google\Chrome\User Data\XP:C:\Documents and Settings\ ...

  7. chrome浏览器下的xdebug helper使用方法

    chrome浏览器下的xdebug helper使用方法     自从安装了xdebug后,发现每次调试都需要从eclipse中先从头启动,然后一步步走到你要调试的页面,而不是说想什么时候调试就什么时 ...

  8. button 在chrome浏览器下被点击时会出现一个橙色的边框

    问题描述: button在chrome浏览器下被点击时会出现一个橙色的边框 在button上添加 :focus{outline:none;}也无法解决. 解决办法: 在button上添加 :focus ...

  9. Chrome浏览器下调试SASS

    网上说的方案各有各的说法,尝试多个才找到有效方案,为避免后来者麻烦,现在讲讲如何调试 笔者ruby版本为3.4.19,因为sass文件的编译是需要ruby环境的,使用sass前需要先安装! 第一步(核 ...

随机推荐

  1. LiLinux系统下如何修改主机名

    1,用root用户登录,或者切换root用户,先查看当前的主机名:hostname  (如果之前没有修改过,一般默认为localhost.localdomain): 2,vi /etc/sysconf ...

  2. c# 重写索引

    //using System;//using System.Collections.Generic;//using System.Text; //namespace 索引//{//    class ...

  3. 使用Angular和Nodejs搭建聊天室

    一,利用Node搭建静态服务器 这个是这个项目的底层支撑部分.用来支持静态资源文件像html, css, gif, jpg, png, javascript, json, plain text等等静态 ...

  4. 读>>>>白帽子讲Web安全<<<<摘要→我推荐的一本书→1

      <白帽子讲Web安全>吴翰清著 刚开始看这本书就被这本书吸引,感觉挺不错,给大家推荐下,最近读这本书,感觉不错的精华就记录下, 俗话说>>>好脑袋不如一个烂笔头< ...

  5. Milking Cows

    Milking Cows Three farmers rise at 5 am each morning and head for the barn to milk three cows. The f ...

  6. zstu.4019.排队购票(多维dp)

    排队购票 Time Limit: 1 Sec  Memory Limit: 64 MB Submit: 1264  Solved: 808 Description 一常球赛开始前,售票工作正在进行中. ...

  7. 使用 Python 创建你自己的 Shell（下）

    导读 在上篇中,我们已经创建了一个 shell 主循环.切分了命令输入,以及通过 fork 和 exec 执行命令.在这部分,我们将会解决剩下的问题.首先,cd test_dir2 命令无法修改我们的 ...

  8. Unity游戏开发之“屏幕截图”

    原地址:http://sygame.lofter.com/post/117105_791680 在unity游戏开发中,可能会遇到在游戏中截屏的效果.这儿提供两种截屏方法.(方法二提供显示截图缩略图代 ...

  9. vundle安装 给vim插上翅膀

    (这些文章都是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) vundle安装方法如下 首先执行以下命令 $ git clone https://githu ...

  10. Linux rsync 命令详解

    服务器之间常常要保持些文件或目录的一致,比如一些大的软件下载网站,它们通常使用多台服务器来提供下载服务.当一台服务器上的文件更新后,其它的服务器 也需要更新,而且 在更新的时候应该是只对新增或是修改过 ...