2017-06-16 10 views
-2

私はcss/htmlが新しく、タイプ番号の入力コントロールのCSSスタイルを知りたいと思っています。私は、次のコードでデフォルトのスタイル(2つの矢印を1つの列に1つ)を取得しています。数字入力エレメントスピナーCSSスタイル

<input type="number" placeholder="0"> 

デフォルトのスタイル:

enter image description here

しかし、私は、下記の画像のCSSスタイルをしたい(赤い円で強調)。ここ Customize appearance of up/down arrows in HTML number inputs 以前に尋ねた同様の質問で私が知っている

Spinner input control

それは私が望んでいない、次のスピンコントロールを提供します。 enter image description here

私の要件は、私が付けた2番目の画像に非常に特有です。

+1

スタックオーバーフローが特定のプログラミングQUESを尋ねるためであります。私たちがあなたを助けるためには、[最小で完全で検証可能な例](https://stackoverflow.com/help/mcve)を提供してください。問題を解決しようとするために作成したコードを表示し、コードの動作が予想される動作とどのように異なるかを記述します。これらの手順を実行すると、あなたの質問に誰かが答えられる可能性が高くなります。 –

+1

[HTML番号入力の上/下矢印の外観をカスタマイズ](https://stackoverflow.com/questions/24537234/customize-appearance-of-up-down-arrows-in-html-number-inputs)の可能な複製 – Deathstorm

+0

いいえ、それは重複していません。私の変更された質問を見てください。 – Jnana

答えて

0

はい、あなたは(WebKitが唯一私が想定する)ことができます。

<style> 
input[type=number] { 
    height: 30px; 
    line-height: 30px; 
    font-size: 16px; 
    padding: 0 8px; 
} 
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]:hover::-webkit-inner-spin-button { 
    background: #eee url('http://i.stack.imgur.com/YYySO.png') no-repeat 50% 50%; 
    width: 14px; 
    height: 14px; 
    padding: 4px; 
    position: relative; 
    right: 4px; 
    border-radius: 28px; 
} 
</style> 

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

See JSFiddle method 1

See JSFiddle method 2

Reference

bg image

+0

返事をありがとう。しかし、これは異なるスタイルを提供します。私が望むスタイルは、添付の2番目のイメージと似ています。 – Jnana

関連する問題