BinaryDevelop
  1. ホーム
  2. html

[解決済み] type=numberの入力のスタイリング

2023-01-08 03:03:50

質問

の内側の"上矢印"と"下矢印"にスタイルを適用することは可能でしょうか? <input type="number"> にスタイルを適用することは可能でしょうか？上向き矢印の背景を青に、下向き矢印を赤に変更したいのですが、可能でしょうか？何かアイデアはありますか？

どのように解決するのですか？

2017年3月17日更新

オリジナルの解決策はもう機能しません。スピナーはshadow domの一部です。今のところ、クローム使用時に非表示にするだけです。 

input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

<input type="number" />

または常に表示するように 

input[type=number]::-webkit-inner-spin-button {
  opacity: 1;
}

<input type="number" />

のみで動作します。 :

<ストライク 

input[type=number]::-webkit-inner-spin-button { 
    -webkit-appearance: none;
    cursor:pointer;
    display:block;
    width:8px;
    color: #333;
    text-align:center;
    position:relative;
}

input[type=number]::-webkit-inner-spin-button:before,
input[type=number]::-webkit-inner-spin-button:after {
    content: "^";
    position:absolute;
    right: 0;
}

input[type=number]::-webkit-inner-spin-button:before {
    top:0px;
}

input[type=number]::-webkit-inner-spin-button:after {
    bottom:0px;
    -webkit-transform: rotate(180deg);
}

<input type="number" />

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します