How to style select options with styled-components reactjs

Question

I have problem with select options styling. I am able to change background and text color, but I can change size of dropdown. Maybe some could tell me what I am doing wrong?

My select:

<Select>
    <option value="" hidden>Type</option>
    <option value="1">Audi</option>
    <option value="2">BMW</option>
    <option value="3">Citroen</option>
    <option value="4">Ford</option>
 </Select>

My Styled-component:

const Select = styled.select`
  width: 100%;
  height:35px;
  background: white;
  color: gray;
  padding-left: 5px;
  font-size: 14px;
  border:none;
  margin-left: 10px;

       option {
         color: black;
         background: white;
         font-weight: small;
         display: flex;
         white-space: pre;
         min-height: 20px;
         padding: 0px 2px 1px;
       }
`;

How my select looks like:

Please clarify what part of the styling isn’t working. What is the desired look? — Ryan Cogswell, Feb 02 '19 at 15:34
@RyanCogswell, I want that my option's width, font size would be same as select input. — PrEto, Feb 02 '19 at 15:49
This works fine for me: https://codesandbox.io/s/qk8r8l7w54. You have something else in your application that is impacting the option styling. — Ryan Cogswell, Feb 02 '19 at 17:02
@RyanCogswell, I found out that it is not working on lower resolution. — PrEto, Feb 02 '19 at 22:22
Did You figure it out ? I also face the same issue with styling options — marcinb1986, Sep 27 '22 at 19:48

score 1 · Answer 1 · answered Feb 07 '23 at 20:39

1

The styles that you can give to an option element are the background-color and color. The other options are ignored. You can see more details in the question below.

How to style the option of an html "select" element?

answered Feb 07 '23 at 20:39

Dmarin

23
4

1

And even those styles may be browser dependent – Trever Thompson Feb 11 '23 at 09:56

How to style select options with styled-components reactjs

1 Answers1