How to style my select options specifically for Firefox?

Question

I'm still a beginner in development and I don't have much knowledge about specific styling for some browsers.

I have a problem where I have a select with some options. In Chrome or Safari this select behaves well, the problem is in Firefox, my option label seems to get a padding-left by itself. I've tried to configure it but I still can't. Could you tell me what it could be?

P.S. This problem in Firefox also repeats itself in iPhones, I hope that solving one can solve the other.

Here's my code I put into codesandbox.io

import React from "react";
import "./styles.css";

const App = () => {
  const [choice, setChoice] = React.useState("apple");

  const fruits = ["apple", "orange", "pineapple", "strawberry", "grape"];
  const options = fruits.map((fruit) => {
    return <option value={fruit}>{fruit}</option>;
  });
  console.log(choice);
  const handleFruit = (event) => {
    setChoice(event.target.value);
  };

  return (
    <div className="App">
      <div style={{ width: "300px", padding: "50px" }}>
        <select onChange={handleFruit}>{options}</select>
      </div>
      <h3>Firefox</h3>
    </div>
  );
};

export default App;

.App {
  font-family: sans-serif;
  text-align: center;
}

select {
  position: relative;
  width: 100%;
  height: 30px;
  border-bottom: 1px solid #000000;
  border-bottom-style: solid;
  border-style: none none solid none;
  background: none;
  border-radius: 0;
  color: #8d8d8d;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

@-moz-document url-prefix() {
  select {
    padding-left: 0;
  }
}

Thank you very much in advance for any help given.

Answer 1

@-moz-document url-prefix() {
  select {
    padding-left: 0;
  }
}

Try this. @-moz-document url-prefix() {} <---- everything inside this will work on mozilla only.