Programming C, C++, Java, PHP, Ruby, Turing, VB
Computer Science Canada 
Programming C, C++, Java, PHP, Ruby, Turing, VB  

Username:   Password: 
 RegisterRegister   
 Highlighted text-input boxes
Index -> Graphics and Design, Web Design -> (X)HTML Help
View previous topic Printable versionDownload TopicSubscribe to this topicPrivate MessagesRefresh page View next topic
Author Message
Martin




PostPosted: 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.
Sponsor
Sponsor
Sponsor
sponsor
rdrake




PostPosted: Sun Oct 23, 2005 7:46 pm   Post subject: (No 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.
Martin




PostPosted: Sun Oct 23, 2005 7:47 pm   Post subject: (No subject)

Hey, sweet, thanks a ton Very Happy
Martin




PostPosted: Sun Oct 23, 2005 8:00 pm   Post subject: (No subject)

The line

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


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

Eh?
rdrake




PostPosted: Sun Oct 23, 2005 8:18 pm   Post subject: (No 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.
Martin




PostPosted: Sun Oct 23, 2005 8:20 pm   Post subject: (No 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?
rdrake




PostPosted: Sun Oct 23, 2005 8:28 pm   Post subject: (No 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.
rdrake




PostPosted: Sun Oct 23, 2005 8:52 pm   Post subject: (No 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.
Sponsor
Sponsor
Sponsor
sponsor
Martin




PostPosted: Mon Oct 24, 2005 9:31 pm   Post subject: (No 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.
Display posts from previous:   
   Index -> Graphics and Design, Web Design -> (X)HTML Help
View previous topic Tell A FriendPrintable versionDownload TopicSubscribe to this topicPrivate MessagesRefresh page View next topic

Page 1 of 1  [ 9 Posts ]
Jump to:   


Style:  
Search: