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

Popular posts from this blog

java - pagination of xlsx file to XSSFworkbook using apache POI -

Unlimited choices in BASH case statement -

apache - How do I stop my index.php being run twice for every user -