0

En mi proyecto tengo una librería para darle estilo Material a todas las paginas.

Tengo un input al que no quiero que le dé estilo esa librería, quiero que ese input esté libre de estilo, pues es generado por otra librería de JS y muestra algunos errores de apariencia.

Quisiera saber si es posible algo como esto:

<input id="inputGeneradoPorJS" type="text" class="notClass:input_Style_Material">

Las dos librerias, tanto la de JS como la de CSS están obfuscadas y .min, por lo que me es imposible meterle mi propio codigo para lograr lo que busco.

2
  • Porque no usas el id para aplicar los estilos de un lado y no le aplicas la clase de la libreria?
    – Layer
    el 7 may. 2020 a las 17:14
  • lo digo porque si la clase es la que le aplica esos estilos al input entonces simplemente no usarla en ese input... pero si se los aplica directamente al input, la cosa ya es un poco distinta...
    – Layer
    el 7 may. 2020 a las 17:19

1 respuesta 1

0

No exite una alternativa tal como lo indicas:notClass:input_Style_Material, pero exiten algunas reglas de CSS y el DOM con el cual quizá puedas solucionar tu problema.

Por ejemplo un librería como Material que es la que indicas, puede tener un solo estilo para todos los input, algo asi como esto:

input{
    border:1px solid #000;
    border-radius: 10px;
}
<input type="text">
<input type="number">

También pueden incluir algunas class para diferenciar entre una y otra. EJ:

input{
    border:1px solid #000;
    border-radius: 10px;
}
.red{
    background:red;
}
.green{
    background:green;
}
<input type="text" class="red">
<input type="number" class="green">

Y puedes agregar tantas clases deses a tu etiqueta y el DOM siempre da prioridad al que esta mas a la izquierda.EJ:

input{
    border:1px solid #000;
    border-radius: 10px;
}
.red{
    background:red;
}
.green{
    background:green;
}
/*esta puede ser una clase que agrega el JS*/
.blue{
    background:blue;
}
<input type="text" class="red blue">
<input type="number" class="green blue">

Como veras las clases red y green han sido hechas a un lado por el DOM y tomo los valores de la class mas a la izquierda que seria blue, en tu caso podrian ser las clases del js que usas, haciendo que tus estilos no se vean como deseas.Hasta aqui tu problema.

Más allá de las class tenemos la propiedad style en html para poder aplicar nuestro estilo a la "fuerza", ya que el DOM da mayor prioridad a esta propiedad ante los css.

input{
    border:1px solid #000;
    border-radius: 10px;
}
.red{
    background:red;
}
.green{
    background:green;
}
/*como no puede deshacerme de esta clase aplico style en la etiqueta html para poder solucionar mi problema*/
.blue{
    background:blue;
}
<input type="text" class="red blue" style="background:#7E1D8D">
<input type="number" class="green blue" style="background:#7E1D8D">

Quizá tu problema no solo sea con el background, pero como no diste mas información trate de hacer un ejemplo completo de como podrías solucionar tu problema.

1
  • @LuisEduardoMoreno, espero se entienda.
    – Shassain
    el 7 may. 2020 a las 18:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.