html - Style input type=number -
i have input type:
input[type=number] { width:9vw; height:10vw; max-width:42px; max-height:52px; text-align: center; -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius:1px; text-align:center; border:3px solid black; display:inline-block; margin-left:6%; background-color:black; color:white; } <input type="number" min="0" max="15" default="2" > i noticed display changes different browsers. i set arrows visible , cover entire height. white arrows on black background. need set default value 2. help
as durbnpoisn said, can set value attribute fix default value problem.
since gave input field type, you're referencing html5 input field, automatically includes arrows. custom arrows, have play around -webkit-appearance: none;. in order so, i've found 2 simple explanations achieve here , here.
combined somehow this:
<input type="number" value="2"> input[type=number] { width: 9vw; height: 10vw; max-width: 42px; max-height: 52px; text-align: center; -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px; text-align: center; border: 3px solid black; display: inline-block; margin-left: 6%; background-color: black; color: white; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { /* display: none; <- crashes chrome on hover */ -webkit-appearance: none; margin: 0; /* <-- apparently margin still there though it's hidden */ 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; } you can check in little fiddle.
Comments
Post a Comment