【问题标题】:Making up down arrow of HTML's input number much bigger and cleaner使 HTML 输入数字上的向下箭头更大更清晰
【发布时间】:2015-06-18 08:17:48
【问题描述】:

而不是Is it possible to always show up/down arrows for input "number"?,我希望能够使向上/向下箭头更大更干净。

我现在拥有的:

我需要像这样把它们变大:

【问题讨论】:

标签: html css html-input


【解决方案1】:

您可以将输入包装在元素中并为其设置样式

div {
  display: inline-block;
  position: Relative;
  border: 2px solid grey;
  border-radius: 10px;
  overflow: hidden;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
div:before,
div:after {
  background: white;
  right: 0px;
  width: 30px;
  height: 20%;
  position: absolute;
  pointer-events: none;
}
div:before {
  content: '';
  bottom: 50%;
  background: url(http://cdn.flaticon.com/png/256/22205.png) no-repeat white;
  background-size: 20px;
  background-position: center;
}
div:after {
  content: '';
  top: 50%;
  background: url(http://cdn.flaticon.com/png/256/22205.png) no-repeat white;
  background-size: 20px;
  transform: rotate(180deg);
  background-position: center;
}
input {
  height: 80PX;
  font-size: 50px;
  outline: 0;
  border: 0;
}
<div>
  <input type="number" value="10" />
</div>

【讨论】:

    【解决方案2】:

    好吧,要实现这一点,您必须使用伪元素和一些 CSS3 技巧。

    创建三角形https://css-tricks.com/snippets/css/css-triangle/

    操作输入数字微调器

    input[type=number]::-webkit-inner-spin-button {
        /* your code*/
    }
    

    这里是例子。

    input {
    	  color: #777;
    	  width: 2em;
    	  font-size: 2em;
    	  border-radius: 10px;
    	  border: 2px solid #ccc;
    	  padding: 5px;
    	  padding-left: 10px;
    	}
    	input[type=number]::-webkit-inner-spin-button {
    	  -webkit-appearance: none;
    	  cursor: pointer;
    	  display: block;
    	  width: 10px;
    	  text-align: center;
    	  position: relative;
    	  background: transparent;
    	}
    	input[type=number]::-webkit-inner-spin-button::before,
    	input[type=number]::-webkit-inner-spin-button::after {
    	  content: "";
    	  position: absolute;
    	  right: 0;
    	  width: 0;
    	  height: 0;
    	  border-left: 7px solid transparent;
    	  border-right: 7px solid transparent;
    	  border-bottom: 10px solid #777;
    	}
    	input[type=number]::-webkit-inner-spin-button::before {
    	  top: 7px;
    	}
    	input[type=number]::-webkit-inner-spin-button::after {
    	  bottom: 7px;
    	  transform: rotate(180deg);
    	}
    &lt;input type="number" value="1"&gt;

    【讨论】:

    • 如果(输入)属性“字体大小:2em;”太大然后箭头会太近,尝试更改(旋转按钮::之前/之后)属性“顶部:7px;”和“底部:7px;”
    【解决方案3】:

    另一个解决方案是使用the JQuery UI spinner element

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-08-07
      • 2014-08-03
      • 2011-11-03
      相关资源
      最近更新 更多