title: How do I style a select element in React?
body: <p>Right now I have a dropdown menu which looks like this:</p>
  <p><a href="https://i.stack.imgur.com/a0W5e.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a0W5e.png" alt="What i have now" /></a></p>
  <p>But I want it to look like this:</p>
  <p><a href="https://i.stack.imgur.com/u9S6t.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u9S6t.png" alt="Image how must be" /></a></p>
  <p>How can I style the HTML <code>select</code> element so that it becomes transparent like in the picture?</p>
  <p>The <code>GermanyLanguage</code> component loads the SVG file for the flag.  The <code>SwitcherContent</code> is a <code>div</code> styled by the styled-components package.</p>
  <pre><code>  return (
      &lt;&gt;
        &lt;SwitcherContent&gt;
          &lt;GermanyLanguage /&gt;
          &lt;select
            name=&quot;select&quot;
            style={{ width: 120, marginLeft: 8 }}
            defaultValue={intl.locale}
            onChange={(e) =&gt; changeLocale(e.target.value)}&gt;
            &lt;option value=&quot;de&quot;&gt;deutsch&lt;/option&gt;
            &lt;option value=&quot;en&quot;&gt;english&lt;/option&gt;
          &lt;/select&gt;
        &lt;/SwitcherContent&gt;
      &lt;/&gt;
    );
  
  export const SwitcherContent = styled.div`
    display: flex;
    flex-direction: row;
    align-items: center;
  `;
  </code></pre>
  <p>background: 'bottom' dint help me , now switcher looks like <a href="https://i.stack.imgur.com/6tpVh.png" rel="nofollow noreferrer">Image</a></p>