Hiding input spinner using styled-component

Question

There are lot of solutions out there to hide the input spinner using css. One of them being:

input::-webkit-inner-spin-button, input::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    -moz-appearance:textfield !important;
}

I want to know how I can implement it in styled-component? Thanks

Salt

Answer 1

Declare like this:

const Input = styled.input`
    ::-webkit-inner-spin-button{
        -webkit-appearance: none; 
        margin: 0; 
    }
    ::-webkit-outer-spin-button{
        -webkit-appearance: none; 
        margin: 0; 
    }    
`;

Use like this:

<Input type="number">

Leighannleighland

Answer 2

If you are using styled-components nowadays, use "&::" at the beginning of the pseudo-element, in your "input" component, as follows:

&::-webkit-inner-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
} 
&::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

Karmakarmadharaya