zoukankan      html  css  js  c++  java
  • <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=" 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>

    我们期望的效果如图:

    2012-03-02_1517472012-03-02_151924

    但chrome浏览器却是这样子的

    2012-03-02_152143

    问题不言而喻了,chrome居然没有按照bacground:tansparent的指令行事,好吧,我认为它是另类,给它一个偏方-webkit-appearance: none;(取消webkit默认的样式)试试!修改后代码在线效果 查看

    2012-03-02_153719

    确实透明了,但是好像默认的下拉小箭头也透明了(严格来说应该是消失了),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

  • 相关阅读:
    Xaml下
    Xmal
    ItemTemplate
    spring aop
    Struts2
    jsp的标签库
    数据库连接池
    request初探
    kubectl 命令大全
    win10常见问题归总
  • 原文地址:https://www.cnblogs.com/lvchenfeng/p/4910235.html
Copyright © 2011-2022 走看看