你的位置:快乐忆站 \ 前端 \ 文章正文

Chrome下搜索输入框背景不能透明

琢磨着将现有的主题改版成html5版的,结果在写头部搜索框的时候发现chrome浏览器下的input类型设为html5新增的search时,这个input的背景无法设置为透明,如果设置为透明的话,chrome下表现为一个白色背景,而firefox浏览器则能正常产生透明背景。但是,如果你将输入框的type换成text时,chrome下背景透明又是可以表现出来的,测试了chrome15开发版和chrome14正式版均有这个问题,先看看demo吧,用事实说话,代码如下:

<style type="text/css">
    #box { background-color: #eee; }
    input { background-color: transparent; }
</style>
<div id="box">
    <p>1.<input type="search" placeholder="type=search的输入框" /></p>
    <p>2.<input type="text" placeholder="type=text的输入框" /></p>
    <p>3.<input type="email" placeholder="type=email的输入框" /></p>
    <p>4.<input type="url" placeholder="type=url的输入框" /></p>
</div>

截图如下:

1.firefox下正常,能透明

2.chrome 14正式版下type=search的不透明,其他正常透明

3.chrome 15开发者版本中还是同样的问题,表现和chrome 14一样

初步判定是chrome浏览器的问题,不知道大家有木有遇到过这种情况?

文章写完了,再随便唠点:昨晚想要安装个Win7+Win8的双系统,结果鬼使神差的把Win7给覆盖安装了。。。怎一个囧字了得啊。。。于是乎索性就用起Win8了!!!此文是在Win8开发者预览版的IE10浏览器下写的,貌似Win8开发者预览版还是有一些小问题,资源管理器很容易抽风,IE10下面中文输入法有时会很卡,而且Metro下的IE10不能使用输入法(谷歌拼音输入法测试不能使用,其他暂时还没测试。)

新的界面确实很给力,很简洁的风格,大部分界面都是纯色背景加上几个文字组成,符合我的口味,非常期待Win8,其他截图不发了,网上一大堆,就发个任务管理器的截图大家看看吧:

大家的话:
  1. 44#
    证卡打印机 Maxthon 3.0 Windows XP
    2011-11-03 14:42
    如果有点模糊感觉这样的效果也不错啊
    小松 Google Chrome 16.0.889.0 Windows 7
    2011-11-03 18:29
    @证卡打印机:真的吗?
  2. 43#
    电脑控 360Safe Explorer Windows 7 x64 Edition
    2011-11-01 13:23
    好文章 顶下
  3. 42#
    烘箱
    2011-10-14 09:32
    这个有什么影响吗?
    小松
    2011-10-14 10:56
    @烘箱:你觉得呢?
  4. 41#
    毕加波
    2011-09-29 01:01
    哇靠!这资源管理器,给力呀!等咱有了钱去买正版系统,哇咔咔
    小松
    2011-09-29 09:41
    @毕加波:这个可以装上体验~
  5. 40#
    cuiqingyao
    2011-09-28 22:44
    技术专家,不错。。。。。。。。。。。
  6. 39#
    wmtimes
    2011-09-28 22:34
    还真没做到这么细过。
    小松
    2011-09-29 09:41
    @wmtimes:我也是用到才发现问题的
    wmtimes
    2011-09-30 02:59
    @小松:我又来重学了一下。
    小松
    2011-10-01 17:15
    @wmtimes:这个没什么学的吧,我也不知道怎么解决这个问题。。。
  7. 38#
    小子
    2011-09-28 21:39
    徐老师,求给力
    小松
    2011-09-28 22:24
    @小子:[code]<?php echo '你妹!'; ?>[/code]
    小子
    2011-09-28 22:33
    @小松:[code]print u'尼玛'[/code]
    小松
    2011-09-28 22:36
    @小子:脚本报错!
    小子
    2011-09-28 22:39
    @小松:是python代码
    小松
    2011-09-29 09:57
    @小子:python你妹!
  8. 37#
    青岛葡萄酒
    2011-09-28 14:22
    来过 关注下博主额
  9. 36#
    b2b平台
    2011-09-28 14:21
    来过 看看了
  10. 35#
    箴言
    2011-09-28 04:51
    奇怪了,我电脑大网站,想网易,百度。谷歌之类的大网站一个都打不开,这些小站却可以打开。
    林西老九
    2011-09-28 08:22
    @箴言:估计是DNS的问题吧
    小松
    2011-09-28 18:31
    @箴言:上不该上的网站了吧?
  11. 34#
    hair
    2011-09-27 17:48
    电脑天才啊  真厉害的
  12. 33#
    沫沫
    2011-09-27 17:48
    我啥也不懂 啥也不懂
  13. 32#
    无线麦克风
    2011-09-27 10:15
    Chrome一直是我的默认浏览器
  14. 31#
    su
    2011-09-26 15:16
    呵呵很久没来了看看你来了啊
    小松
    2011-09-26 19:34
    @su:最近一直很忙啊,没时间走访。。
  15. 30#
    增高药有用吗
    2011-09-25 21:40
    千里迢迢,前来围观。
  16. 29#
    志慧
    2011-09-25 13:01
    好厉害啊~全站透明哎~如果用emblog的话肯定毫不犹豫的用你的主题啦~
    小松
    2011-09-25 13:31
    @志慧:我晕。。。
  17. 28#
    司机、小周
    2011-09-25 11:50
    看到透明了..
    小松
    2011-09-25 12:25
    @司机、小周:啥透明啊?
  18. 27#
    cuike
    2011-09-25 02:07
    由于工作的原因,现在都很少用chrome了。

    PS:目前的盖楼效果很棒。
    小松
    2011-09-25 12:26
    @cuike:很久没见你出没了~
  19. 26#
    凡客返利
    2011-09-24 17:20
    好复杂
  20. 25#
    雨帆
    2011-09-22 14:52
    主题蛮可爱的,这个评论的嵌套 = =。太恐怖的说哦。  不过站点标题旁的一行淘宝旺旺让人有很想吐槽的冲动。
    小松
    2011-09-22 22:07
    @雨帆:亲,欢迎再来吐槽哦~
  21. 24#
    广州SEO
    2011-09-21 23:03
    这些东东不玩了,只是来看看的。
  22. 23#
    论文发表
    2011-09-21 15:24
    尝鲜欲望很强!
  23. 22#
    Mucid
    2011-09-21 13:41
    嗨嗨,Safari+Mac OS 10.6.8 驾到
    小松
    2011-09-22 09:06
    @Mucid:我看到你文章了,mac好玩不?
  24. 21#
    青竹湾博客
    2011-09-21 13:26
    升级了?
    小松
    2011-09-22 09:06
    @青竹湾博客:恩,第一时间升级~
  25. 20#
    C瓜哥
    2011-09-21 13:03
    win8的界面有点让我失望了,简洁过头了
    小松
    2011-09-21 13:06
    @C瓜哥:我喜欢简洁的~
  26. 19#

    2011-09-21 09:23
    蛮神奇的
    小松
    2011-09-21 12:44
    @搜:神奇什么?顺便测试下[code].code{padding:8px;}[/code]

    2011-09-21 14:39
    @小松:[code]难道评论框支持标签[/code]
    老王
    2011-09-21 17:39
    @搜:<pre class="prettyprint linenums">怎么添加标签</pre>
    老王
    2011-09-21 17:41
    @老王:[code]难道要这样?[/code]
    小松
    2011-09-22 09:07
    @老王:你昨天那个插入代码的方法应该没什么大问题吧,本地测试ok吗?
    老王
    2011-09-22 09:53
    @小松:只是搞得玩的,我也用不上,你还说呢。都不肯给我看看。
    小松
    2011-09-22 10:41
    @老王:昨晚加班到9点,10点过才到家,加班的孩子伤不起啊。。。
    老王
    2011-09-22 11:16
    @小松:哈哈,你那工作经常性加班,会累死人的.
    小松
    2011-09-22 12:21
    @老王:没办法,搞IT的加班是很正常的。。。
    小子
    2011-09-27 16:18
    @小松:[code]看来我是特例[/code]
  27. 18#
    西门
    2011-09-20 14:21
    牛逼啊,都HTML5了
    小松
    2011-09-20 14:21
    @西门:苦逼啊,IE蛋疼!!!
  28. 17#
    淘宝女装皇冠
    2011-09-19 14:17
    哇,Windows8还木有想过啊,,我的破机不知道能用否啊
    小松
    2011-09-19 18:46
    @淘宝女装皇冠:不好意思,将你的网址去掉了~
  29. 16#
    deardongdong
    2011-09-19 11:48
    暂时没有好的电脑来配win 8了,只能等买新电脑后再说啦。
    小松
    2011-09-19 12:26
    @deardongdong:配置不用好,你看看内存使用率就知道了,系统要求和Win7差不多
  30. 15#
    candy
    2011-09-19 10:47
    HTML代码:
    <div class="sprite">
          <a id="topmenu" class="gototop"  style="display: block" href="javascript:;" onclick="window.scrollTo(0,0);return false;"></a>
    </div>
1 2

随机日志:

推荐日志:

说两句吧:

正在回复: 取消

sitemap