web-dev-qa-db-ja.com

ChromeでのHTML5数値入力（スピンボックス）のスタイリング

Chromeは最近、入力要素のスタイルを更新しました。私はnumber入力タイプが本当に好きですが、新しいスタイルでは、正方形の入力ボックスにうまく収まらない丸いボタンが表示されます。

私はこれらの入力を変更するために多くの試みをしましたが、それらは動揺しません。から input[type='number']それ自体をこれらのボタンに：

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    border-radius: none !important; background: black; color: red;
}

input:-webkit-autofill { background: black; color: red; }

まったく変えられないようです。誰かがこれを経験したことがありますか？ ボタンを非表示にする方法があることはわかっています。 理想的には、境界線の半径を削除したいだけです。

興味深いことに、これらのボタンではパディングが機能しているようです。私は彼らが聞いていることを知っています！

csshtml5google-chromeinputbox
9
Vael Victus

それを達成する方法があります。これが純粋なCSSソリューションです：
http://jsfiddle.net/Volker_E/WwfW9/

ご覧のとおり、この場合の魔法のCSSプロパティ/値は-webkit-appearance: none;です。これにより、スピンボタンはデフォルトの外観を失います。そして、あなたはあなたが望むあらゆる方法で（ほぼ）スタイリングすることができます。

/* Spin Buttons modified */
input[type="number"].mod::-webkit-outer-spin-button, 
input[type="number"].mod::-webkit-inner-spin-button {
    -webkit-appearance: none;
    background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT/sYhhKPiPT+F/LJgEsHv37v+EMGkmkuImoh2NoQAANlcun/q4OoYAAAAASUVORK5CYII=) no-repeat center center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1em;
    border-left: 1px solid #bbb;
    opacity: .5; /* shows Spin Buttons per default (Chrome >= 39) */
}

Data URI画像をbackground（したがって小さいサイズ）として追加しましたが、ニーズに合っていると思われる画像/ CSSプロパティを追加できます。

残っている唯一の問題は、上ボタンと下ボタンを別々にスタイル設定することができず、:hoverと:focusのスタイルがないため、使いやすさの面で少し失われていることです。 1つのボタン。
これは、Chromeの現在の実装では不可能です。

楽しんで！

2015年1月18日編集：Chrome> = v39の変更を反映した回答の改善。@ dtracersに感謝

11
Volker E.