Customize input type number
Good morning. I would like to know if it is possible to customize the increment and decrement signals in an input of type number only using the ::after and ::before pseudo elements. I have tried several versions that I have found on the internet but although the styles are present in the elements, these elements are not visible.
3 Replies
This is the last code that I tried
/Input Number/
.custom-number-input {
background-color: #5C5082;
color: white;
border: 1px solid #5C5082;
padding: 5px;
position: relative;
appearance: textfield;
}
.custom-number-input::-webkit-inner-spin-button,
.custom-number-input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.custom-number-input::before,
.custom-number-input::after {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
pointer-events: none;
z-index:999;
}
.custom-number-input::before {
border-width: 5px 5px 0 5px;
border-color: transparent transparent transparent white;
top: 10px;
left: 10px;
transform: translateY(-50%);
}
.custom-number-input::after {
border-width: 0 5px 5px 5px;
border-color: white transparent transparent transparent;
bottom: 10px;
left: 10px;
transform: translateY(50%);
}
If I'm not mistaken pseudo elements dont* work on most inputs because they are self closing and there is no content within. Textarea I believe does allow pseudo elements as its not self closing. For example, br tags, hr tags, img tags- self closing , no content , no pseudo elements
Thank you. It makes a lot of sense.