如何在 React 中设置 select 元素的样式？

Question

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

But I want it to look like this:

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 1

I think you can do like this.

<GermanyLanguage/> -> SVG file
  return (
    <>
      <SwitcherContent>
        <GermanyLanguage />
        <select
          name="select"
          style={{ width: 120, marginLeft: 8, background:"bottom" }}
          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;
`;

Answer 2

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>
  </>
);