使用CSS更改输入字段的文本颜色

Question

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>

Answer 1

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;

Answer 2

I think you can do this in your css file :

#email{
  color:red;
}

You can give color of your choice.

Answer 3

Create a css class that holds the changes you want to do to the fields , and then affect the class to the input tags via ng-class directive. In your code the syntax is wrong I think.. but that's the idea.

Answer 4

You can apply the following code input { color: red; }

Answer 5

It is definitely possible that you can change your input's text color with CSS and there are quite some ways to that depending upon the result you want to achieve.

For example, if you want to set your colour to blue and have it always stay blue, you can use the following code:

#email {
    color: blue; /* Or color: #0000ff */
}

Alternatively, if you want to change your text's colour when your selected input has focus, you can use this instead:

#email:focus {
    color: blue; /* Or color: #0000ff */
}

You can also change your colour on hover, but this is not something that is used very often:

#email:hover {
    color: blue; /* Or color: #0000ff */
}

Answer 6

To change input color for different types of input use respective tag (with/without its pseudo state)

input, select, textarea {
    color: #000;
}
input:focus, input:active

/* etc... */

input[type=text] - will only select text fields
input[type=password] - will only select password fields
input[type=number] - will only select number fields
/* etc.. */

input[type=text]:focus
/* etc */

For placeholder styling

::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}

Answer 7

Many of your suggestions work great. This is the route I used with css

input, select, textarea{
    color: #076000;
}

textarea:focus, input:focus {
    color: #076000;
}