Mientras construía una forma reactiva angular, se me ocurrió que debería poner en mayúscula la primera letra de cada entrada, así que en mi css escribí

   input {
      text-transform: capitalize;
   }

Pero en mi html tengo entrada para correo electrónico y no quiero darle estilo, ¿cómo puedo excluir eso?

Mi html

                <div class="form-group" 
                  [ngClass]="displayFieldCss('FirstName')">
                    <label for="FirstName" class="control-label 
                   required">First name</label>
                    <input type="text" id="FirstName" class="form-control" 
                 formControlName="FirstName">

                </div>

        <div class="form-group" [ngClass]="displayFieldCss('Email')">
           <label for="Email" class="control-label 
            required">Email</label>
           <input type="text" id="Email" class="form-control" 
           formControlName="Email"> 
         </div>
0
codemonkey00016 6 mar. 2018 a las 11:55

5 respuestas

La mejor respuesta
  • Agregue una clase adicional al elemento de entrada que desea personalizar:

html

<input type="text" id="FirstName" class="form-control myInput" 
         formControlName="FirstName">

css

.myInput{
          text-transform: capitalize;

}
  • ya sea

CSS

  #FirstName{
          text-transform: capitalize;
    }
0
Vega 6 mar. 2018 a las 09:06

Creo que puedes usar el siguiente estilo

input:not([id="Email"]) { text-transform: capitalize; }

1
Mahmoud Ahmed 6 mar. 2018 a las 09:06

En primer lugar, debe usar type correcto para sus elementos de entrada.

Entonces puedes diseñarlas en consecuencia.

/* Directly */ 
input[type="text"] {
  text-transform: capitalize
}

/* or by exclusion */ 
input:not([type="email"]) {
  text-transform: capitalize
}
<input type="text" placeholder="input type='text'" />
<input type="email" placeholder="input type='email'" />
0
VilleKoo 6 mar. 2018 a las 09:14

La mejor manera es crear una clase css en lugar de definir la etiqueta como css.

file.html

   <div class="form-group" 
                      [ngClass]="displayFieldCss('FirstName')">
                        <label for="FirstName" class="control-label 
                       required">First name</label>
                        <input class="inputCss" type="text" id="FirstName" class="form-control" 
                     formControlName="FirstName">

                    </div>

            <div class="form-group" [ngClass]="displayFieldCss('Email')">
               <label for="Email" class="control-label 
                required">Email</label>
               <input class="" type="text" id="Email" class="form-control" 
               formControlName="Email"> 
             </div>

cssFile.css

 .inputCss{
      tesxt-transform: capitalize;

}

0
Manvender Singh Rathore 6 mar. 2018 a las 09:08

Puede usar la pseudoclase: not ().

input:not(#Email) {
   text-transform: capitalize;
}

Consulte : no uso si necesita más información.

3
Rocks 6 mar. 2018 a las 08:58