Cambiar el color de la entrada de subrayado y la etiqueta en el marco Materialise.css

Recuerda que en las ciencias informáticas un problema casi siempre tiene más de una resoluciones, no obstante nosotros aquí enseñamos lo más óptimo y mejor.

Solución:

Puede, de acuerdo con Materialise Docs, usando:

 /* label focus color */
   .input-field input[type=text]:focus + label 
     color: #000;

/* label underline focus color */
   .input-field input[type=text]:focus 
     border-bottom: 1px solid #000;
     box-shadow: 0 1px 0 0 #000;
   

Retazo

/*** !important was needed for snippet ***/



/* label focus color */
 .input-field input:focus + label 
   color: red !important;
 
 /* label underline focus color */
 .row .input-field input:focus 
   border-bottom: 1px solid red !important;
   box-shadow: 0 1px 0 0 red !important
 

  

    

      

        account_circle
        
        First Name
      
      

        phone
        
        Telephone
      
    
  

La respuesta de dippas es correcta, pero si desea que las áreas de texto sean del mismo color, debe establecer estas reglas de CSS:

/* label focus color */
    .input-field input[type=text]:focus + label, .materialize-textarea:focus:not([readonly]) + label 
     color: #005eed !important;
    

/* label underline focus color */
    .input-field input[type=text]:focus, .materialize-textarea:focus:not([readonly]) 
     border-bottom: 1px solid #005eed !important;
     box-shadow: 0 1px 0 0 #005eed !important;
    

Tenga en cuenta la regla .materialize-textarea para la etiqueta y la parte inferior del borde.

En caso de que alguien esté aquí en 2019 y pruebe esto con la nueva versión de Materialise (1.0.0) y no querer usar !importante en su CSS, el fragmento de abajo funcionó para mí.

Nota: Esto se aplicará a todos los campos de entrada, si desea algunos específicos, es decir, texto, cambie [type] para [type=text].

    /* Inactive/Active Default input field color */
    .input-field input[type]:not([readonly]),
    .input-field input[type]:focus:not([readonly]),
    .input-field textarea:not([readonly]),
    .input-field textarea:focus:not([readonly]) 
        border-bottom: 1px solid #01579b;
        box-shadow: 0 1px 0 0 #01579b;
    

    /* Inactive/Active Default input label color */
    .input-field input[type]:focus:not([readonly])+label,
    .input-field textarea:focus:not([readonly])+label 
        color: #01579b;
    

    /* Active/Inactive Invalid input field colors */
    .input-field input[type].invalid,
    .input-field input[type].invalid:focus,
    .input-field textarea.invalid,
    .input-field textarea.invalid:focus 
        border-bottom: 1px solid #e57373;
        box-shadow: 0 1px 0 0 #e57373;
    

    /* Active/Inactive Invalid input label color */
    .input-field input[type].invalid:focus+label,
    .input-field input[type].invalid~.helper-text::after,
    .input-field input[type].invalid:focus~.helper-text::after, 
    .input-field textarea.invalid:focus+label,
    .input-field textarea.invalid~.helper-text::after,
    .input-field textarea.invalid:focus~.helper-text::after 
        color: #e57373;
    

    /* Active/Inactive Valid input field color */
    .input-field input[type].valid,
    .input-field input[type].valid:focus,
    .input-field textarea.valid,
    .input-field textarea.valid:focus 
        border-bottom: 1px solid #26a69a;
        box-shadow: 0 1px 0 0 #26a69a;
    

    /* Active/Inactive Valid input label color */
    .input-field input[type].valid:focus+label,
    .input-field input[type].valid~.helper-text::after,
    .input-field input[type].valid:focus~.helper-text::after,
    .input-field textarea.valid:focus+label,
    .input-field textarea.valid~.helper-text::after,
    .input-field textarea.valid:focus~.helper-text::after 
        color: #26a69a;
    

Retazo

  
  
  



  

    
    Email