How to change text field background color only for placeholder text?

Questions and tutorials related to Cascading Style Sheets *all versions*

Moderators: egami, macek, gesf

Post Reply
prohor
New php-forum User
New php-forum User
Posts: 7
Joined: Sun Sep 11, 2016 8:38 am

Thu Nov 03, 2016 1:00 pm

I want to change text fields background color only for placeholder text. What will change from "green" to "white" when any text is inserted. I want to keep it different when mouse over it. I wrote a code but text field's background color get's back to geen again after cursor taking away after text insertion.

I have a input box in html form

Code: Select all

<input type="text" id="Editbox4" style="position:absolute;left:50px;top:458px;width:328px;height:30px;line-height:26px;z-index:4;" name="phone" value="" placeholder="Enter Phone Number" >
and for css properties

Code: Select all

#Editbox4
{
background-color: green;	
color : yellow;
}
#Editbox4:focus
{
background-color: #FFFFFF;
color: #000000;	
}
#Editbox4:hover{	
background-color: white; }
#Editbox4:hover::-webkit-input-placeholder{color:yello;}

What is wrong, how to fix? Please help.

Post Reply