Jump to content
prohor

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

Recommended Posts

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.

Share this post


Link to post
Share on other sites

I think the only solution is to use JavaScript. I would change the configuration so that the style properties are applied to a class defined in the input field instead of the id of that element. Then have an onchange event for the field to change the class accordingly.

 

Working example:

<html>
<head>
 
<script>
 
function updatePlaceholderClass(fldObj)
{
    //Set fieldClass based on whether the field has a value
    var fieldClass = (fldObj.value=='') ? 'placeholderInput' : '';
    fldObj.className = fieldClass;
    return;
}
 
</script>
 
<style>
.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;}
 
</style>
</head>
 
<body>
 
<input
    type="text" id="Editbox4" class="placeholderInput"
    style="position:absolute;left:50px;top:458px;width:328px;height:30px;line-height:26px;z-index:4;"
    name="phone" value="" placeholder="Enter Phone Number"
    onchange="updatePlaceholderClass(this);">
 
</body>
</html>
Edited by Psycho

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.