样式化输入 type = number

小开

最佳答案

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;
}

<input type="number" />

or to always show:

input[type=number]::-webkit-inner-spin-button {
opacity: 1;
}

<input type="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); }

<input type="number" />

小开

Crazy idea...

You could play around with some pseudo elements, and create up/down arrows of css content hex codes. The only challange will be to precise the positioning of the arrow, but it may work:

input[type="number"] {
height: 100px;
}


.number-wrapper {
position: relative;
}


.number-wrapper:hover:after {
content: "\25B2";
position: absolute;
color: blue;
left: 100%;
margin-left: -17px;
margin-top: 12%;
font-size: 11px;
}


.number-wrapper:hover:before {
content: "\25BC";
position: absolute;
color: blue;
left: 100%;
bottom: 0;
margin-left: -17px;
margin-bottom: -14%;
font-size: 11px;
}

<span class='number-wrapper'>
<input type="number" />
</span>

小开

the above code for chrome is working fine. i have tried like this in mozila but its not working. i found the solution for that

For mozila

input[type=number] {
-moz-appearance: textfield;
appearance: textfield;
margin: 0;
}

Thanks Sanjib

小开

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;
}

小开

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;
}

<span class='number-wrapper'>
<input type="number" />
</span>

小开

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;
}

<input type="number" value="0" min="0" max="100"/>
<div id="inc-button" class="spinner-button">+</div>
<div id="dec-button" class="spinner-button">-</div>

小开

The css to modify the spinner arrows is obtuse and unreliable cross-browser.

The most stable option I have found, is to absolutely position an image with pointer-events: none; on top of the spinners.

Untested in Edge but works in all other browsers.

小开

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>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0"/>
</head>
<body >
<input type="number" value="1" step="1" />


</body></html>

小开

Tested in Edge, this works to hide the arrows in Edge...

input[type=number]::-webkit-inner-spin-button, ::-webkit-outer-spin-button{
opacity: 0;
}