View Full Version : Custom text box problems in CSS

05-29-2011, 08:04 PM
I have two text boxes that have been styled in CSS to load different background images. When I click on one, it changes to a different background (one without text in the image) kinda like Twitter's login boxes. The only problem I have is that once text has been entered and the user focuses on a different box, the image with the text comes back, and it's overlapping with the entered info. Very ugly.

I have my boxes here. The text is part of the BG image.
Here I've entered something into one box.
Which promptly turns into this when I continue to another box.

How can I make the background image change once and stay that way?

05-29-2011, 09:13 PM
Rather than use a background image use Javascript. It's more flexible. The JS would look like this:

<script type="text/javascript">
function restoreDefault(obj){
if (!obj.value){
function clearDefault(obj){
if (obj.value==obj.defaultValue){

An the text field would look like this:

<input type="text" value="this is default value" onfocus="clearDefault(this)" onblur="restoreDefault(this)">

BTW, I found this particular solution at http://forums.adobe.com/message/3474242

05-29-2011, 09:34 PM
Thanks! It worked out perfectly. Also, that's two less images to store on my server.