0

Tengo una duda, tengo un textarea

<textarea id="textareaComentarioAdicionalServicios" class="form-control textareaComentarios" 
style="height: 95px;"></textarea>

Este por defecto es color blanco, con efecto de borde y esas cosas por defecto, entonces le agregue modo oscuro a la página web y funciona a como deseaba si cliqueo sobre el boton para cambiar a modo oscuro funciona, el textarea se pone oscuro, pero al momento de seleccionarlo y escribir en el, este se vuelve blanco o modo light por así decirlo ¿Alguien sabe como evitar eso, decir que se quede en modo oscuro aun editando en él?

Código Button

<button type="button" class="btn" style="background-color: #17A2B8; border-color: solid 1px #17A2B8; 
color: white;" onclick="cambiarModo()">Modo Oscuro</button>

Código JS

function cambiarModo(){
   var textareaComentarioAdicionalServicios = 
   document.getElementById("textareaComentarioAdicionalServicios");
   textareaComentarioAdicionalServicios.classList.toggle("oscuroInput");
}

Código CSS

.oscuroInput{
transition: .40s;
background: #202020;
}

Alguien puede explcarme porfavor...

1 respuesta 1

0

eso ocurre porque Bootstrap le agrega un color de fondo a los input que están seleccionados (focus) entonces, para que tu código funcione como quieres, solo debes modificar tu css y agregarle

.oscuroInput, .oscuroInput:focus{
    transition: .40s;
    background: #202020;
}

solo asegúrate que este css este después del tag que carga el .css de Bootstrap, de lo contrario Bootstrap te lo podría pisar. saludos!

1
  • Jhonnattan Rivera, muchisimas gracias ¡Si funciono!
    – user158215
    Commented el 28 ago. 2020 a las 15:06

Tu Respuesta

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