0
138
VistasHow to style my select options specifically for Firefox?
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.
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
@-moz-document url-prefix() {
select {
padding-left: 0;
}
}
Try this. @-moz-document url-prefix() {} <---- everything inside this will work on mozilla only.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta