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


#1

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

<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

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


#2

[php] #Editbox4::-webkit-input-placeholder {
color: red;
}

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

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

    #Editbox4:-ms-input-placeholder {
        color: red;
    }[/php]

#3

[code]

.placeholderInput { background-color: green; color : yellow; } .placeholderInput:focus { background-color: #FFFFFF; color: #000000; } .placeholderInput:hover{ background-color: white; } .placeholderInput:hover::-webkit-input-placeholder{color:yello;} [/code]