Question

7

Change color of text for input field using css

rated 0 times [ 13] [ 6] / answers: 1 / hits: 15458 / 8 Years ago, tue, june 14, 2016, 12:00:00

I have created an input field for a log-in feature on the page however I have been trying to change the color of the text in the field using css. Is this possible. I have tried many routes however none seem to work so far. Below is the code for the email portion of the sign in.

 <input class=form-control ng-class:{'error':dashboard.showFormErrors && !dashboard.signinForm.email.$valid}

               data-ng-model=signinController.signin.email

               type=email

               name=email

               id=email

               placeholder=Email

               ng-minlength=2

               ng-maxlength=3

               required>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ericmaximilianz

Add To Favorites

Follow

Total Points: 252

Total Questions: 118

Total Answers: 87

Location: Virgin Islands (U.S.)

Member since Tue, Jul 7, 2020

4 Years ago

answered 8 Years ago lamarmaximiliand · Accepted Answer

Yes, it is possible.

The CSS can target the input of type email or just this unique input.

Email input element:

input[type=email]{

    color: red;

}

Or specific id=email:

#email {

    color: red;

}

Here's a snippet:

input[type=email] {

  color: red;

}

#email2 {

  color: green;

}

<input class=form-control ng-class:{'error':dashboard.showFormErrors && !dashboard.signinForm.email.$valid} 

       data-ng-model=signinController.signin.email 

       type=email 

       name=email 

       id=email 

       placeholder=Email 

       ng-minlength=2 

       ng-maxlength=3 

       required>

<input class=form-control ng-class:{'error':dashboard.showFormErrors && !dashboard.signinForm.email.$valid} 

       data-ng-model=signinController.signin.email 

       type=email 

       name=email 

       id=email2 

       placeholder=Email

       ng-minlength=2

       ng-maxlength=3 

       required>

If this still isn't working, you may have to use the !important attribute to override other CSS setters.

color: red !important;