-----------------------------------

Martin

Sun Oct 23, 2005 7:05 pm


Highlighted text-input boxes

-----------------------------------

How can I make the text-input boxes on a page highlight when selected (similar to the login/password/search boxes at http://www.deviantart.com/)?

Is it just a css option?

Thanks in advance.


-----------------------------------

rdrake

Sun Oct 23, 2005 7:46 pm



-----------------------------------

You need to use a mixture of CSS and JavaScript.  Here's an example:
 
 
Testing 

textarea{border:  1px solid #000000;}
.blur{background-color:  #cccccc;}
.focus{background-color:  #ffffff;}
 
 

 
This is a test
 
That code will create a textbox with a grey colour.  When it comes into focus, the background colour turns to white, then it changes back when it blurs.

Just play around with that example to do what you want.

On most browsers (except IE for sure), I know you can do something like the following, but it only works on FireFox, Opera, and probably a few other browsers.

textarea{border:  1px solid #000000; background-color:  #cccccc;}
textarea:hover{border:  1px solid #000000; background-color:  #ffffff;}
It's much easier to use the last example, but like I said, IE doesn't support it.


-----------------------------------

Martin

Sun Oct 23, 2005 7:47 pm



-----------------------------------

Hey, sweet, thanks a ton :D


-----------------------------------

Martin

Sun Oct 23, 2005 8:00 pm



-----------------------------------

The line

				

is giving me a warning on onFocus and onBlur saying that "Attribute name (onFocus/onBlur) uses wrong case character.

Eh?


-----------------------------------

rdrake

Sun Oct 23, 2005 8:18 pm



-----------------------------------

 
 
Testing 

textarea, input{border:  1px solid #000000;}
.blur{background-color:  #cccccc;}
.focus{background-color:  #ffffff;}
 
 

 

 
Works for me.  What browser are you using?  I've tested the code in Firefox, Opera, and IE.


-----------------------------------

Martin

Sun Oct 23, 2005 8:20 pm



-----------------------------------

Oh, it works, it's just eclipse giving me the warning. Whatever...ahh..

Also, do you know how I can change the border on a  menu?


-----------------------------------

rdrake

Sun Oct 23, 2005 8:28 pm



-----------------------------------

Sure do.

I'll give you an example.  Basically what you do is assign a class (or not if you want all to be the same) and just use the CSS border element to change the borders.


 
Testing 

.test{border:  1px dashed #000000;}
 
 



Number 1
Number 2
Number 3


That should give the select with a class of "test" a black, dashed border.  If you wanna make it solid and/or a different colour, just change the "dashed" to either "solid", "dotted", etc. and change the "#000000" to whatever hex value you want.

It doesn't look like IE supports this though.  This is the only way I'm aware of at the moment.


-----------------------------------

rdrake

Sun Oct 23, 2005 8:52 pm



-----------------------------------

Oops, forgot I wrote a tutorial for this kinda thing before.  So I have another, shorter way of writing the above code.  It'll save a lot of hassle and make your code easier to read.


 
Testing 
 
input{border:  1px solid #000000;} 
.blur{background-color:  #cccccc;} 
.focus{background-color:  #ffffff;} 
 
 

 
 
 
The above should do the same as I posted before, but it's much smaller and easier to read/understand.  The last thing you need is tons of nonsense in your pages when you're trying to make changes.


-----------------------------------

Martin

Mon Oct 24, 2005 9:31 pm



-----------------------------------

Hey, thanks a ton.

The reason it was giving me a warning was because apparently 'onFocus' and 'onBlur' are supposed to be 'onfocus' and 'onblur' respectively.