不要在一个特定输入上包含CSS样式

Question

在构建角度反应形式时，我想到我应该在每个输入上首字母大写，所以在我的CSS中，我写道

   input {
      text-transform: capitalize;
   }

但是在我的html中我输入了电子邮件并且不想设置它，我怎么能排除它？

我的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>

Answer 1

• 向要自定义的input元素添加其他类：

HTML

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

CSS

.myInput{
          text-transform: capitalize;

}

• 或

CSS

  #FirstName{
          text-transform: capitalize;
    }

Answer 2

您可以使用：not（）伪类。

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

如果您需要更多信息，请参阅:not usage。

Answer 3

我想你可以使用以下风格

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

Answer 4

最好的方法是创建一个css类，而不是将标记定义为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;

}

Answer 5

首先，您应该使用正确的typefor输入元素。

然后你可以相应地设计它们。

/* 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'" />