<select>在chrome浏览器下背景透明问题

最新推荐文章于 2024-06-16 22:37:36 发布

转载最新推荐文章于 2024-06-16 22:37:36 发布 · 658 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shishm/archive/2012/03/02/2377354.html

文章标签：

#xhtml #ui

本文探讨了在Chrome浏览器中使select元素背景透明的解决方案，通过使用-webkit-appearance:none属性来覆盖默认样式，并指出这种方法可能导致下拉箭头消失的问题。文章提供了在线效果查看链接，并建议使用CSS来实现自定义select框以达到美观效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在上篇文章《只用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框吧！

有完美的方法，请告知一声，谢谢！

转载于:https://www.cnblogs.com/shishm/archive/2012/03/02/2377354.html