让HTML的数字输入框中的上下箭头更大更清晰

Question

不是想要像“是否可能始终为输入‘数字’显示向上/向下箭头？”那样，我想让向上和向下箭头变得更大和更清晰。

我现在所拥有的是：

我需要按照这样的方式使它们变大：

- Mohammad Naji

---

你能发布代码/演示吗？ - G.L.P

http://jsfiddle.net/14p8tkex/ - Mohammad Naji

谢谢@Itay告诉我关于Chrome的事情。但即使在Chrome中，箭头的容器也必须更宽，而高度则可以。 - Mohammad Naji

会给你额外的工作，但是考虑一下转换吗？https://jsfiddle.net/14p8tkex/2/ - vals

是的 @vals，在Chrome中可以。但是火狐呢 ：- /？https://jsfiddle.net/14p8tkex/4/ - Mohammad Naji

Answer 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>

- Vitorino fernandes

Answer 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);
 }

<input type="number" value="1">

- singhiskng

---

如果（输入）属性“font-size: 2em;”太大，则箭头会太靠近，尝试更改（spin-button :: before / after）属性“top: 7px;”和“bottom: 7px;” - mfruizs

Answer 3

另一个解决方案是使用JQuery UI spinner element，它可以提供浏览器之间的统一性和更多的自定义选项。

- Eino Gourdin