web-dev-qa-db-ja.com

HTML入力番号の下矢印をはるかに大きくてきれいにする

入力「数値」に対して常に上向き/下向き矢印を表示することは可能ですか？ ではなく、上向き/下向き矢印をより大きく、よりクリーンにできるようにしたいです。

私が今持っているもの： 

私はそれらをこのように大きくする必要があります： 

htmlcsshtml-input
10
Mohammad Naji

入力を要素にラップしてスタイルを設定できます

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>
7
Vitorino fernandes

それを実現するには、疑似要素といくつかの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">
2
singhiskng

ブラウザ間の統一性とより多くのカスタマイズオプションを提供する別のソリューションは、 JQuery UIスピナー要素 を使用することです。

1
Eino Gourdin