Styling An Input Type=number
Is it possible to apply a style in the inner 'up arrow' and 'down arrow' of a in CSS? I would like to change the background of the up arrow to blue and
Solution 1:
UPDATE 17/03/2017
Original solution won't work anymore. The spinners are part of shadow dom. For now just to hide in chrome use:
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
<inputtype="number" />
or to always show:
input[type=number]::-webkit-inner-spin-button {
opacity: 1;
}
<inputtype="number" />
You can try the following but keep in mind that works only for Chrome:
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]::-webkit-inner-spin-button:before,
input[type=number]::-webkit-inner-spin-button:after {
content: "^";
position:absolute;
right: 0;
}
input[type=number]::-webkit-inner-spin-button:before {
top:0px;
}
input[type=number]::-webkit-inner-spin-button:after {
bottom:0px;
-webkit-transform: rotate(180deg);
}
<inputtype="number" />
Solution 2:
For Mozilla
input[type=number] {
-moz-appearance: textfield;
appearance: textfield;
margin: 0;
}
For Chrome
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin:0;
}
Solution 3:
I modified @LcSalazar's answer a bit... it's still not perfect because the background of the default buttons can still be seen in both Firefox, Chrome & Opera (not tested in Safari); but clicking on the arrows still works
Notes:
- Adding
pointer-events: none;
allows you to click through the overlapping button, but then you can not style the button while hovered. - The arrows are visible in Edge, but don't work because Edge doesn't use arrows. It only adds an "x" to clear the input.
.number-wrapper {
position: relative;
}
.number-wrapper:after,
.number-wrapper:before {
position: absolute;
right: 5px;
width: 1.6em;
height: .9em;
font-size: 10px;
pointer-events: none;
background: #fff;
}
.number-wrapper:after {
color: blue;
content: "\25B2";
margin-top: 1px;
}
.number-wrapper:before {
color: red;
content: "\25BC";
margin-bottom: 5px;
bottom: -.5em;
}
<spanclass='number-wrapper'><inputtype="number" /></span>
Solution 4:
A little different to the other answers, using a similar concept but divs instead of pseudoclasses:
input {
position: absolute;
left: 10px;
top: 10px;
width: 50px;
height: 20px;
padding: 0px;
font-size: 14pt;
border: solid 0.5px#000;
z-index: 1;
}
.spinner-button {
position: absolute;
cursor: default;
z-index: 2;
background-color: #ccc;
width: 14.5px;
text-align: center;
margin: 0px;
pointer-events: none;
height: 10px;
line-height: 10px;
}
#inc-button {
left: 46px;
top: 10.5px;
}
#dec-button {
left: 46px;
top: 20.5px;
}
<inputtype="number"value="0"min="0"max="100"/><divid="inc-button"class="spinner-button">+</div><divid="dec-button"class="spinner-button">-</div>
Solution 5:
I've been struggling with this on mobile and tablet. My solution was to use absolute
positioning on the spinners, so I'm just posting it in case it helps anyone else:
<html><head><style>body {padding: 10px;margin: 10px}
input[type=number] {
/*for absolutely positioning spinners*/position: relative;
padding: 5px;
padding-right: 25px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: inner-spin-button !important;
width: 25px;
position: absolute;
top: 0;
right: 0;
height: 100%;
}
</style><metaname="apple-mobile-web-app-capable"content="yes"/><metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0"/></head><body ><inputtype="number"value="1"step="1" /></body></html>
Post a Comment for "Styling An Input Type=number"