Input focus text colour

[fonejacka]

I’m trying to replicate a form similar to that of this website (http://couleecreative.com/contact-us/)

You’ll notice that if you click into one of the text fields the background changes colour and the text turns to white. Then, when you click out of the box the colour changes to a grey colour, so you can see it on the white background.

My problem is as follows:

I need to do the same. I have successfully managed to sort out the background colour and set my text colour to white. However, when you clock out of the box you can’t see the text because the background colour goes and , of course, it’s white on white.

I think it’s something to do with input text focus …. etc

Please can someone guide me – Thanks!

[josef777]

Put the following in your CSS file and play with the colors


input[type=text]:focus {
background: none!important;
background-color: #f00!important;
color: #fff!important;
}


[fonejacka]

Hi josef,

Thanks for your response. I tried the code and although it does allow the background of the field & the text colour to be changed there is no text colour transition once you click out the field.

Basically, on the example, you will notice that the text colour begins as 1 colour (black) and then transitions to another (white) when not in focus.

It’s proving to be a very difficult thing to do, any further ideas ?

Thanks,

Sam

[josef777]

Sam
post a url will give you the exact solution

[fonejacka]

Hi Josef777,

Ok I have had some success, I have managed to get the first 3 text boxes to work using this

input[type=text]:focus {
color: #ffffff!important;
}

However, the text boxes that are paragraphs haven’t changed – Do you know what the [type=] is for paragraph section? The input basically

Best regards,

Sam

[fonejacka]

AHA!

I’ve done it! This is the final answer….

input[type=text]:focus {
color: #ffffff!important;
}

input, textarea:focus {
color: #ffffff!important;
}

Thank you Josef for your help…

You might be able to help me with my next question. As you can see on (http://couleecreative.com/contact-us/) when you try and click submit and there’s a required field the text boxes are surrounded by a colour block and it appears on the right. I’d like it to look almost exactly the same. Any idea on how I would do this?

Best regards,

Sam

[fonejacka]

Actually, Just incase anyone is looking for the answer it’s actually this:

input[type=text]:focus, textarea:focus, input[type=email]:focus {
color: #ffffff!important;

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

Sorry, made a mistake

[Author]

Posts