PDA

View Full Version : Custom text box problems in CSS


FethrdWlf
05-29-2011, 09: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.
http://dl.dropbox.com/u/17921516/Capture.JPG
Here I've entered something into one box.
http://dl.dropbox.com/u/17921516/Capture2.JPG
Which promptly turns into this when I continue to another box.
http://dl.dropbox.com/u/17921516/Capture3.JPG

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

DWcourse
05-29-2011, 10: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){
obj.value=obj.defaultValue;
}
}
function clearDefault(obj){
if (obj.value==obj.defaultValue){
obj.value="";
}
}
</script>

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

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