I am trying to style a slider with styled-components for React, but I do not get how I can style the thumb. I have a CSS that looks like this:
.faderInput::-webkit-slider-thumb {
-webkit-appearance: none;
width: 15px;
height: 15px;
border:1px solid black;
...
}
and my styled component looks like this
const FaderInput = styled.input`
...
::-webkit-slider-thumb {
-webkit-appearance: none;
width: 15px;
height: 15px;
border:1px solid black;
...
}
`;
Does anybody know how I can port this class selector to styled-components?
I actually got help. You have to add a &
and then it looks like this:
const FaderInput = styled.input`
...
&::-webkit-slider-thumb {
-webkit-appearance: none;
width: 15px;
height: 15px;
border:1px solid black;
...
}