Change color of text for input field using 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>

It would be great if you could accept an answer, if any, that solve your question, or let us know what is missing, so we can find one that does — Asons
– Asons, Commented Jun 19, 2016 at 18:07
I posted the answer/solution that I used on the bottom of the page. — NVA
– NVA, Commented Jun 20, 2016 at 19:29
An answer already had focus as a suggestion, accept that instead of post an answer of your own using the very same — Asons
– Asons, Commented Jun 20, 2016 at 20:16

Stephen · Accepted Answer · 2016-06-14 04:42:27Z

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;

Nakul Kumar · Accepted Answer · 2016-06-14 04:26:34Z

3

I think you can do this in your css file :

#email{
  color:red;
}

You can give color of your choice.

answered Jun 14, 2016 at 4:26

Nakul Kumar

1702 silver badges11 bronze badges

Comments

Hichem Al Abbessi · Accepted Answer · 2016-06-14 04:23:57Z

1

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.

answered Jun 14, 2016 at 4:23

Hichem Al Abbessi

8411 bronze badges

Comments

SESN · Accepted Answer · 2016-06-14 04:32:00Z

1

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

answered Jun 14, 2016 at 4:32

SESN

1,28313 silver badges22 bronze badges

Comments

NVA · Accepted Answer · 2016-06-14 17:23:14Z

1

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;
}

answered Jun 14, 2016 at 17:23

NVA

1,6925 gold badges19 silver badges26 bronze badges

Comments

Angel Politis · Accepted Answer · 2016-06-14 04:40:35Z

0

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 */
}

answered Jun 14, 2016 at 4:40

Angel Politis

11.4k15 gold badges51 silver badges67 bronze badges

Comments

4dgaurav · Accepted Answer · 2016-06-14 05:07:56Z

0

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;  
}

answered Jun 14, 2016 at 5:07

4dgaurav

11.5k4 gold badges35 silver badges59 bronze badges

Collectives™ on Stack Overflow

Change color of text for input field using css

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related