CODEWITHSUNDEEP
htmlcssangularformsinput
codemonkey00016
codemonkey00016

Reputation: 75

Don't include css styling on one specific input

While building angular reactive form it occurred to me that I should capitalize first letter on each input, so in my css, I wrote

   input {
      text-transform: capitalize;
   }

But in my html I have input for email and don't want to style that, how can I exclude that?

my 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>

Upvotes: 0

Views: 1162

Answers (5)

VilleKoo
VilleKoo

Reputation: 2854

First of all, You should use correct typefor your input elements.

Then you can style them accordingly.

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

Upvotes: 0

user6021112
user6021112

Reputation:

The best way is to create a css class instead of defining tag as 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;

}

Upvotes: 0

Mahmoud Ahmed
Mahmoud Ahmed

Reputation: 41

I think you can use the following style

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

Upvotes: 1

Vega
Vega

Reputation: 28708

  • Either add an additional class to the input element that you want to customize:

html

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

css

.myInput{
          text-transform: capitalize;

}
  • either

CSS 

  #FirstName{
          text-transform: capitalize;
    }

Upvotes: 0

Rocks
Rocks

Reputation: 1155

You can use the :not() pseudo-class.

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

Refer :not usage if you need more info.

Upvotes: 3

Related Questions