Highlighted text-input boxes

Martin · **Posted:** Sun Oct 23, 2005 7:05 pm

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 · **Posted:** Sun Oct 23, 2005 7:46 pm

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

code:

<html>
<head>
<title>Testing</title>
<style type="text/css">
textarea{border: 1px solid #000000;}
.blur{background-color: #cccccc;}
.focus{background-color: #ffffff;}
</style>
</head>

<body>
<textarea id="box" class="blur" onFocus="document.getElementById('box').className='focus'" onBlur="document.getElementById('box').className='blur'">This is a test</textarea>
</body>
</html>

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.

code:

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 · **Posted:** Sun Oct 23, 2005 7:47 pm

Hey, sweet, thanks a ton Very Happy

Martin · **Posted:** Sun Oct 23, 2005 8:00 pm

The line

code:

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

Eh?

rdrake · **Posted:** Sun Oct 23, 2005 8:18 pm

code:

<html>
<head>
<title>Testing</title>
<style type="text/css">
textarea, input{border: 1px solid #000000;}
.blur{background-color: #cccccc;}
.focus{background-color: #ffffff;}
</style>
</head>

<body>
<input type="text" width="30" id="box" class="blur" onBlur="document.getElementById('box').className='blur'" onFocus="document.getElementById('box').className='focus'" />
</body>
</html>

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

Martin · **Posted:** 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 <select> menu?

rdrake · **Posted:** 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.

code:

<html>
<head>
<title>Testing</title>
<style type="text/css">
.test{border: 1px dashed #000000;}
</style>
</head>

<body>
<select class="test">
<option>Number 1</option>
<option>Number 2</option>
<option>Number 3</option>
</select>
</body>
</html>

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 · **Posted:** 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.

code:

<html>
<head>
<title>Testing</title>
<style type="text/css">
input{border: 1px solid #000000;}
.blur{background-color: #cccccc;}
.focus{background-color: #ffffff;}
</style>
</head>

<body>
<input type="text" width="30" onBlur="this.className='blur'" onFocus="this.className='focus'" />
</body>
</html>

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 · **Posted:** 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.

	Computer Science Canada Programming C, C++, Java, PHP, Ruby, Turing, VB Username: Password: Register
Wiki Blog Search Turing Chat Room Members