zoukankan      html  css  js  c++  java
  • 移除input type="number"的上下箭头

    使用html5的新控件input type="number"时,浏览器中看到其会自带上下箭头,有时UI设计的需要是采用另外的样式,只能想办法将其隐藏,放置另外的button,用js来控制。

    参照:伪元素控制表单样式

    http://www.w3cplus.com/css3/list-of-pseudo-elements-to-style-form-controls.html

    input[type=number]

    WebKit

    Webkit通过默认的数字选择器提供下拉列表一个控制。伪元素::-webkit-textfield-decoration-container, ::-webkit-inner-spin-button 和 ::-webkit-outer-spin-button提供定制化样式。虽然不能对这样的元素做过多的控制,但是至少可以隐藏掉下来

    <input type="number">   
    
    ::-webkit-textfield-decoration-container { }
    ::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }
    ::-webkit-outer-spin-button {
      -webkit-appearance: none;
    }   
  • 相关阅读:
    HDU --1251
    POJ -- 2436
    POJ -- 3140
    POJ 3107
    POJ -- 2002
    POJ -- 1655
    lintcode154
    lintcode192
    lintcode582
    lintcode901
  • 原文地址:https://www.cnblogs.com/wildorchid/p/4727181.html
Copyright © 2011-2022 走看看