title: How to style select options with styled-components reactjs
body: <p>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?</p>
  
  <p>My select:</p>
  
  <pre><code>&lt;Select&gt;
      &lt;option value="" hidden&gt;Type&lt;/option&gt;
      &lt;option value="1"&gt;Audi&lt;/option&gt;
      &lt;option value="2"&gt;BMW&lt;/option&gt;
      &lt;option value="3"&gt;Citroen&lt;/option&gt;
      &lt;option value="4"&gt;Ford&lt;/option&gt;
   &lt;/Select&gt;
  </code></pre>
  
  <p>My Styled-component:</p>
  
  <pre><code>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;
         }
  `;
  </code></pre>
  
  <p>How my select looks like:
  <a href="https://i.stack.imgur.com/bCxK9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bCxK9.png" alt="Select photo"></a></p>