Computer Science Canada :: View topic - Highlighted text-input boxes

Computer Science Canada

Highlighted text-input boxes

Author:	Martin [ Sun Oct 23, 2005 7:05 pm ]
Post subject:	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.

Author:

rdrake [ Sun Oct 23, 2005 7:46 pm ]

Post subject:

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.

Author:	Martin [ Sun Oct 23, 2005 7:47 pm ]
Post subject:
Hey, sweet, thanks a ton

Author:

Martin [ Sun Oct 23, 2005 8:00 pm ]

Post subject:

The line

code:

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

Eh?

Author:

rdrake [ Sun Oct 23, 2005 8:18 pm ]

Post subject:

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.

Author:	Martin [ Sun Oct 23, 2005 8:20 pm ]
Post subject:
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?

Author:

rdrake [ Sun Oct 23, 2005 8:28 pm ]

Post subject:

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.

Author:

rdrake [ Sun Oct 23, 2005 8:52 pm ]

Post subject:

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.

Author:	Martin [ Mon Oct 24, 2005 9:31 pm ]
Post subject:
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.

You can syndicate this boards posts using the file backend.php or view the topic map using sitemap.php.

Terms of Use | Privacy Policy