0
132
Views¿Cómo diseñar mis opciones de selección específicamente para Firefox?
Todavía soy un principiante en el desarrollo y no tengo mucho conocimiento sobre estilos específicos para algunos navegadores.
Tengo un problema donde tengo una select con algunas options . En Chrome o Safari, esta selección se comporta bien, el problema está en Firefox, mi etiqueta de opción parece tener un padding-left por sí mismo. He intentado configurarlo pero sigo sin poder. Me podrías decir que puede ser?
PD: Este problema en Firefox también se repite en iPhones, espero que solucionando uno se solucione el otro.
Aquí está mi código que puse encodesandbox.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; } }Desde ya muchas gracias por cualquier ayuda brindada.
·
Juan Pablo Isaza
1 answers
Answer question0
@-moz-document url-prefix() { select { padding-left: 0; } }Prueba esto. @-moz-document url-prefix() {} <---- todo lo que hay dentro de esto funcionará solo en mozilla.
·
Juan Pablo Isaza
Report
Answer question