prohor Posted November 3, 2016 Share Posted November 3, 2016 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. Quote Link to comment Share on other sites More sharing options...
Psycho Posted November 3, 2016 Share Posted November 3, 2016 (edited) 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 November 3, 2016 by Psycho Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.