Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

Chrome input type =“ number”CSSスタイリング

input type =numberのスタイルを設定するには、次のCSSを使用します-

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

上記はスピナーなしで表示されます。

スピナーを表示してスタイルを設定するには、

を使用します 
input[type=number]::-webkit-inner-spin-button {
   opacity: 1;
}
出力 上記は次の出力を示しています-

Chrome input type =“ number”CSSスタイリング


  1. CSSを使用して、すべての<input>要素を有効な値でスタイル設定します

    CSS：validセレクターを使用して、すべての要素を有効な値でスタイル設定します。 例 次のコードを実行して、：valid Selectorを実装してみてください： <!DOCTYPE html> <html>    <head>       <style>          input:valid {             background: red;    

  2. CSSを使用して入力タイプ番号から矢印/スピナーを削除するにはどうすればよいですか？

    以下は、CSSを使用して入力タイプから矢印/スピナーを削除するコードです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {    -webkit-appearance: