es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Materialize select no funciona con CSS personalizado.

15 Jul, 2023 Programación

Tengo un formulario con algunos campos de texto y desplegables. Mientras que los campos de texto funcionan bien, los campos desplegables no funcionan como se requiere:
1. La primera opción en el desplegable debería estar deshabilitada, pero esto no está sucediendo.
2. He utilizado “required” para el select, sin embargo, el formulario se envía sin mostrar ninguna alerta. Esto funciona bien para los campos de texto.

Siento que esto probablemente tenga algo que ver con el CSS personalizado que he agregado para cambiar los colores del tema Materialize por defecto, pero no puedo depurarlo más.
Aquí está el enlace al fiddle: https://jsfiddle.net/2bxy0gf7/14/

Select HTML

<div class="input-field col col s6 m3 l2">
      <select id="FQMreferring-doctor" required="" aria-required="true">
         <option value="" selected="" disabled="">Choose your option</option>
         <option value="Name1">Name1</option>
         <option value="Name2">Name2</option>
      </select>
   <label for="FQMreferring-doctor">Referring Doctor</label>
   </div>

Custom CSS

.dropdown-content li > a,
.dropdown-content li > span {
color: #0067d0 !important;
}
/* label focus color /
.input-field input:focus + label {
color: #0067d0 !important;
}
/ label underline focus color */
.row .input-field input:focus {
border-bottom: 1px solid #00bcd4 !important;
box-shadow: 0 1px 0 0 #00bcd4 !important;
}
“`

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Como experto en TI especializado en menús desplegables y Materialize, los problemas mencionados parecen estar relacionados con el código CSS personalizado. El primer problema es que la primera opción del menú desplegable debería estar deshabilitada, pero no funciona como se pretende. El segundo problema es que, aunque se ha utilizado el atributo “required”, el formulario se envía sin mostrar una alerta. El bloque de código para el campo de selección en HTML se ve así:

    <div class="input-field col s6 m3 l2">
  <select id="FQMreferring_doctor" required="" aria-required="true">
    <option value="" selected="" disabled="">Elige tu opción</option>
    <option value="Nombre1">Nombre1</option>
    <option value="Nombre2">Nombre2</option>
  </select>
 <label for="FQMreferring_doctor">Médico de referencia</label>
 </div>

    El código CSS personalizado es el siguiente:

    .dropdown-content li > a,
.dropdown-content li > span {
  color: #0067d0 !important;
}

/* color de enfoque de etiqueta */
.input-field input:focus + label {
  color: #0067d0 !important;
}

/* color de enfoque de subrayado de etiqueta */
.row .input-field input:focus {
  border-bottom: 1px solid #00bcd4 !important;
  box-shadow: 0 1px 0 0 #00bcd4 !important;
}

    Puede ser conveniente inspeccionar más a fondo el código CSS personalizado, ya que parece estar causando los problemas.

Comments are closed.