Yasel Perez
KPCKevin Powell - Community
•Created by Yasel Perez on 4/9/2024 in #front-end
Customize input type number
Thank you. It makes a lot of sense.
4 replies
KPCKevin Powell - Community
•Created by Yasel Perez on 4/9/2024 in #front-end
Customize input type number
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%);
}
4 replies