Html input text colors

Change color of text for input field using css

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.

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

An answer already had focus as a suggestion, accept that instead of post an answer of your own using the very same

7 Answers 7

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

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

I think you can do this in your css file :

You can give color of your choice.

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.

You can apply the following code input

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

input, select, textarea < color: #076000; >textarea:focus, input:focus

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:

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

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

Источник

How to edit HTML input value colour?

In my input field (text), I have a text which disappears once it is clicked. How can I make this text a shade lighter by editing its colour? Sorry, the code looks messy, I had to chop it up to show you. Thanks! James

5 Answers 5

Maybe something like this (just add your style):

UPDATE: Since placeholder attribute is very well supported on all major browsers, there is no need to do anything manually. Its possible to achieve the same thing with this:

Hi, thanks for the reply I used your code but when I did the input field changed shape and out of line with the other field. How do I correct this?

Like i said you just needed to add your styles. Here is it with your styles: jsfiddle.net/bdevic/DR4sg/4

Ah ok thanks but I want it so the value text is a light grey and the actual text that is inputted into the field is black. And from that I changed and added font/ style color and it never changed the value text color?

You can add color in the style rule of your input: color:#ccc;

I did it but once I have clicked on the input field and the text disappears the text I type in is also this color. How can I make it so they both have different colors?

You can change the CSS color property using JavaScript in the onclick event handler (in the same way you change the value property):

Note that it’s not the best practice to use inline JavaScript. You’d be better off giving your input an ID, and moving your JavaScript out to a block instead:

document.getElementById("yourInput").onclick = function()

Источник

CSS Forms

The look of an HTML form can be greatly improved with CSS:

Styling Input Fields

Use the width property to determine the width of the input field:

Example

The example above applies to all elements. If you only want to style a specific input type, you can use attribute selectors:

• 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..

Padded Inputs

Use the padding property to add space inside the text field.

Tip: When you have many inputs after each other, you might also want to add some margin , to add more space outside of them:

Example

Note that we have set the box-sizing property to border-box . This makes sure that the padding and eventually borders are included in the total width and height of the elements.
Read more about the box-sizing property in our CSS Box Sizing chapter.

Bordered Inputs

Use the border property to change the border size and color, and use the border-radius property to add rounded corners:

Example

If you only want a bottom border, use the border-bottom property:

Example

Colored Inputs

Use the background-color property to add a background color to the input, and the color property to change the text color:

Example

Focused Inputs

By default, some browsers will add a blue outline around the input when it gets focus (clicked on). You can remove this behavior by adding outline: none; to the input.

Use the :focus selector to do something with the input field when it gets focus:

Example

Example

Input with icon/image

If you want an icon inside the input, use the background-image property and position it with the background-position property. Also notice that we add a large left padding to reserve the space of the icon:

Example

input[type=text] <
background-color: white;
background-image: url(‘searchicon.png’);
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
>

Animated Search Input

In this example we use the CSS transition property to animate the width of the search input when it gets focus. You will learn more about the transition property later, in our CSS Transitions chapter.

Example

input[type=text] <
transition: width 0.4s ease-in-out;
>

input[type=text]:focus width: 100%;
>

Styling Textareas

Tip: Use the resize property to prevent textareas from being resized (disable the «grabber» in the bottom right corner):

Example

textarea <
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
>

Styling Select Menus

Example

select <
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
>

Styling Input Buttons

Example

input[type=button], input[type=submit], input[type=reset] <
background-color: #04AA6D;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
>

/* Tip: use width: 100% for full-width buttons */

For more information about how to style buttons with CSS, read our CSS Buttons Tutorial.

Responsive Form

Resize the browser window to see the effect. When the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other.

Advanced: The following example uses media queries to create a responsive form. You will learn more about this in a later chapter.

Aligned Form

An example of how to style labels together with inputs to create a horizontal aligned form:

Источник