mario February 2016

Style input type=number

I have this 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 that the display changes with different browsers. I I would set the arrows always visible and which cover the entire height. I would only white arrows on a black background. I need also to set default value to 2. thanks for your help

Answers


durbnpoisn February 2016

You don't use default. You use value:

<input type="number"  MIN="0" MAX="15"  value="2" >

Your min and max will be ignored. That should be handled with Javascript. That is not true. It actually works fine. Plus, it even auto-filters bad values.

As far as the looking different part... You have a condition in your style to allow for different browsers. That may or may not be overridden at render time.


Aer0 February 2016

As durbnpoisn said, you can simply set a value attribute to fix your default value problem.

Since you gave your input field a type, you're referencing to the HTML5 input field, which automatically includes those arrows. To get some custom arrows, you have to play around with -webkit-appearance: none;. In order to do so, I've found 2 simple explanations to achieve this here and here.

Combined together this would look somehow like 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 some margin are still there even 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 also check this in a little fiddle.

Post Status

Asked in February 2016
Viewed 1,733 times
Voted 4
Answered 2 times

Search




Leave an answer