zoukankan      html  css  js  c++  java
  • 解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 && 一般的浏览器input和button的高度不一致问题

    解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 

     如果我们把一个表单设置位 autofocus ,这时这个表单在获取焦点后就会产生淡黄色的背景,我们就是使用!important的方法也无法去除。

    解决方法一: 取消设置input表单的autofocus属性

     

    解决方法二:对于没有背景图片的元素,添加下面的代码:

    input:-webkit-autofill {
      -webkit-box-shadow: 0 0 0px 1000px white inset;
      -webkit-text-fill-color: #333;
    }

    解决方法三: 对于有背景图片的元素,将背景图片拿出来,置于<label></label>中,再对input表单进行设置。

    值得注意的是:除了chrome默认定义的background-color,background-image,color不能用 !important 提升其优先级以外,其他的属性均可使用!important提升其优先级。

     

    一般的浏览器input和button的高度不一致问题

    当我们在一行中写出input(type="text")以及button以及select,我们可以发现,这几个的高度是不一致的, 主要问题是浏览器赋予的默认border不同而导致的。

    解决方法: 将此三者的border设置为0即可发现设置同样的高度,它们就是一样高啦!!

    input输入框在chrome下会有黄色的框,我们只需设置为 outline: 0 none; 即可。

  • 相关阅读:
    codevs2894、2837、1669、2503、3231
    poj2528
    HDU 1542 Atlantis(矩形面积并)
    Light OJ 1080
    陶哲轩实分析 2.2节 习题试解
    Linux多线程实践(六)使用Posix条件变量解决生产者消费者问题
    css3模糊图片
    高速掌握Lua 5.3 —— I/O库 (1)
    覆盖率測试工具gcov的前端工具_LCOV_简单介绍
    MySQL显示状态信息
  • 原文地址:https://www.cnblogs.com/zhuzhenwei918/p/6417901.html
Copyright © 2011-2022 走看看