弥补HTML的输入数字的箭头更大，更清洁 [英] Making up down arrow of HTML's input number very bigger and cleaner

问题描述

而不是是否可能总是显示用于输入数字的向上/向下箭头？，我希望能使上/下箭头变得更大更干净。

我现在有什么：

我需要使它们更大，像这样：

解决方案

您可以将输入包含在元素中并对其进行样式化。

  div {display：inline-block; position：相对; border：2px solid gray; 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;身高：20％ position：absolute; pointer-events：none;} div：before {content：'';底部：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;轮廓：0; border：0;}  

 < div& < input type =numbervalue =10/>< / div>  

b

Rather than Is it possible to always show up/down arrows for input "number"?, I want to be able to make up/down arrow very bigger and cleaner.

What I have right now:

I need to make them bigger like this:

解决方案

you can wrap a input in and element and style it

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>

这篇关于弥补HTML的输入数字的箭头更大，更清洁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！