White squares around check boxes and radio buttons

Misha · Posted: Mon Jan 29, 2007 4:42 am

I know this is a cosmetic change, but I think it's worth doing, it gives a site more professional look. I removed those all over my site...

Raven · Posted: Mon Jan 29, 2007 10:19 am

We could do that too, but we have chosen to remain unprofessional looking. Hmmm. Maybe that's why we only get 1,000,000+ hits per month and only have 15,000+ members. Darn! I wish I had thought of that! killing me

Seriously, those "white squares" as you call them are known as rubber bands and for many people it is a needed/quick visual identifier/locater of where they are (or have been) on a busy page. There are several methods that can be used to accomplish this. Here are some examples, if one is interested Smile

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Examples
</title>
<style type="text/css">
/*<![CDATA[*/
.bold {font-weight:bold;}
.underline {text-decoration: underline;}
/*]]>*/
</style>
</head>
<body>
<h1>
Examples
</h1>

<form action="" method="post">
<input type="button" value="Click Me" name="button1" id="button1" onclick="alert('Button 1 was selected');" /> <label for="button1">Using <input type="button"> - <span class="bold">Button 1 will leave the outline after being clicked</span></label><br />
<br />
<input type="button" value="Click Me" name="button2" id="button2" onclick="alert('Button 2 was selected'); this.blur();" /> <label for="button2">Using <input type="button"> and the onClick="this.blur();" event - <span class="bold">Button 2 will <span class="underline">NOT</span> leave the outline after being clicked</span></label><br />

<br />
<button onclick="alert('Button 3 was selected');">Click Me</button> <label for="button3">Using <button></button> - <span class="bold">Button 3 will <span class="underline">NOT</span> leave the outline after being clicked</span></label><br />

<br />
<button onclick="alert('Button 4 was selected'); this.blur();">Click Me</button> <label for="button4">Using <button></button> and the onClick="this.blur();" event - <span class="bold">Button 4 will <span class="underline">NOT</span> leave the outline after being clicked</span></label>
</form>

</body>
</html>

Misha · Posted: Mon Jan 29, 2007 3:00 pm

Raven,

Either I did not understand you, or I don't see this behavior on the new site.

Anyway, just wanted to be of some help to your great team.

Thanks.

manunkind · Posted: Tue Jan 30, 2007 7:10 am

Raven,

I believe Misha is talking about the white background of the radio buttons:

I fixed his old site here:

Only registered users can see links on this board!
Get registered or login to the forums!

..which was apparently a red theme. Laughing

Misha · Posted: Tue Jan 30, 2007 12:30 pm

I thought I made myself clear Rolling Eyes

Thanks for clarifying this, manunkind Smile

I actually used a slightly different approach, based on your suggestion. I created classes in css with corresponding background.

And what do you mean "red theme"? I always used fisubice on this site.

Raven · Posted: Tue Jan 30, 2007 1:15 pm

M. & M.

You are correct. I did not understand. But at least I provided some good coding examples for the other issue ROTFL

manunkind · Posted: Tue Jan 30, 2007 9:24 pm

Misha wrote:

And what do you mean "red theme"? I always used fisubice on this site.

I dunno. My sample in the other thread said red. I must have just threw that in there as a sample. Laughing