Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
Summary
A CSS pseudo-element is used to style specified parts of an element.
Syntax
The syntax of pseudo-elements:
selector::-webkit-inner-spin-button { property:value; }
Webkit :Inner Spin Button
WebKit provides a spinner control by default for number picker inputs. Pseudo-elements ::-webkit-textfield-decoration-container, ::-webkit-inner-spin-button and ::-webkit-outer-spin-button are provided for customization. While you cannot do a whole lot with these elements, it can be useful to hide the spinner.
<input type="number">
::-webkit-textfield-decoration-container { }
::-webkit-inner-spin-button {
-webkit-appearance: none;
}CSS Content
<DOCTYPE html>
<html>
<head>
<style>
#p {
text-align:center;
font-family:Garmond, serif;
font-size:18px;
}
#div {
border-radius: 5px;
border: 2px solid #6495ed11;
background-color: #BCD2EEE;
height: 50px;
width:120px;
margin:auto;
text-align: center;
}
input[type=number]::-webkit-inner-spin-button,
{
-webkit-appearance: none ;
position: absolute;
top: 0;
right: 0;
bottom: 0;
opacity: 0.5;
margin: 10;
background-color: red no-repeat center;
}
#span{
font-weight: bold;
font-size: 18px;
color: #ffffff;
}
</style>
<head>
<title>CSS</title>
</head>
<body>
<p> A spinner allows you to increase or decrease a number in a box by clicking little up and down arrows.</p><br/><br/>
<input type="number"></input>
</body>
</html>
OUTPUT:
Another Output:
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | (Yes) | ? | ? | (Yes) | (Yes) |
| Feature | Android | Chrome | Firefox Mobile (Gecko) | Firefox OS | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
| Basic support | ? | ? | ? | ? | ? | ? | ? |