zoukankan      html  css  js  c++  java
  • 覆盖Html5默认样式

    1. input  type=number

    //chrome
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
          appearance: none;
          -webkit-appearance: none;
          margin: 0;
        }
        //Firefox
        .input-captcha-text[type="number"]{
          -moz-appearance:textfield;
        }

    2. input type=date

    input {
        -webkit-appearance: none;
        appearance: none;
      }
      input[type=date]::-webkit-inner-spin-button {
        visibility: hidden;
      }

    3. ios上input点击突然变灰然后消失

    input {
      color: #66645a;
      border: none;
      -webkit-tap-highlight-color: rgba(0,0,0,0); // 阻止ios点击时变灰
      -webkit-appearance: none;
      appearance: none;
      background-color: #fff;
    
      &:focus {
        border: none;
        outline: none;
        background-color: #fff;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        -webkit-appearance: none;
        appearance: none;
      }
    
      &:visited {
        border: none;
        outline: none;
        background-color: #fff;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        -webkit-appearance: none;
        appearance: none;
      }
    }

    4. 给type为date的input添加placeholder

    <input id="baseDate" type="date" value="" placeholder="日期"/>
    
    baseDate = document.getElementById('baseDate');
    basePlaceholder = ''
    if baseDate
      baseDate.onfocus = ->
        basePlaceholder = this.placeholder
        this.removeAttribute('placeholder')
      baseDate.onblur = ->
        if this.value is ''
          this.setAttribute('placeholder', basePlaceholder)
    
    input {
      font-size: 14px;
      height: 20px;
      width: 100%;
      line-height: 20px;
      padding: 11.5px 0 11.5px 10px;
      color: #66645a;
      border: none;
      -webkit-tap-highlight-color: rgba(0,0,0,0); // 阻止ios点击时变灰
      -webkit-appearance: none;
      appearance: none;
      background-color: #fff;
    
      &:focus {
        border: none;
        outline: none;
        background-color: #fff;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        -webkit-appearance: none;
        appearance: none;
      }
    
      &:visited {
        border: none;
        outline: none;
        background-color: #fff;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        -webkit-appearance: none;
        appearance: none;
      }
    }
    
    //添加date placeholder
    input[type="date"]:before {
      content: attr(placeholder);
      color: #999;
    }
    
    input[type=date]::-webkit-inner-spin-button {
      visibility: hidden;
      background-color: #fff;
    }
  • 相关阅读:
    必备java参考资源列表
    java中使用js函数
    6.游戏特别离不开脚本(3)-JS脚本操作java(2)(直接解析JS公式,并非完整JS文件或者函数)
    6.游戏特别离不开脚本(3)-JS脚本操作java(直接解析JS公式,并非完整JS文件或者函数)
    6.游戏特别离不开脚本(2)-获取脚本引擎
    6.游戏特别离不开脚本(1)-原因
    5.eclipse 自带的jdk没有源码,改了它
    4.调个绿豆沙护眼色
    3.myeclipse 8.5 m1 注册码
    Zxing中文乱码的简单解决办法
  • 原文地址:https://www.cnblogs.com/floraCnblogs/p/clear-html-default.html
Copyright © 2011-2022 走看看