How do I style a select element in React?

Right now I have a dropdown menu which looks like this:

What i have now

But I want it to look like this:

Image how must be

How can I style the HTML select element so that it becomes transparent like in the picture?

The GermanyLanguage component loads the SVG file for the flag. The SwitcherContent is a div styled by the styled-components package.

  return (
    <>
      <SwitcherContent>
        <GermanyLanguage />
        <select
          name="select"
          style={{ width: 120, marginLeft: 8 }}
          defaultValue={intl.locale}
          onChange={(e) => changeLocale(e.target.value)}>
          <option value="de">deutsch</option>
          <option value="en">english</option>
        </select>
      </SwitcherContent>
    </>
  );

export const SwitcherContent = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
`;

background: ‘bottom’ dint help me , now switcher looks like Image

Answer

Every browser defines its own base stylesheet for built-in elements like select. You need to override all of the default styled properties with the styles that you want.

You can change the styles by adding properties to the style prop like you have done with style={{ width: 120, marginLeft: 8 }}, by using styled-components like you have done with SwitcherContent = styled.div, or by declaring classes in a CSS file and setting the className prop on your components.

You will need to override background, color, border, and possibly more. The background property could be transparent, unset, or black.

This should get you started in the right direction:

return (
  <>
    <SwitcherContent>
      <GermanyLanguage />
      <select
        style={{
          width: 120,
          marginLeft: 8,
          background: "black",
          color: "white",
          border: "none"
        }}
        name="select"
        defaultValue={intl.locale}
        onChange={(e) => changeLocale(e.target.value)}
      >
        <option value="de">deutsch</option>
        <option value="en">english</option>
      </select>
    </SwitcherContent>
  </>
);