White squares around check boxes and radio buttons

registered · 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...

Site Admin/Owner Joined: Aug 27, 2002 Posts: 17088

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 &lt;input type="button"&gt; - <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 &lt;input type="button"&gt; 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 &lt;button&gt;&lt;/button&gt; - <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 &lt;button&gt;&lt;/button&gt; 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>

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.

registered · 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:
http://www.ravenphpscripts.com/posts10765-highlight-.html

..which was apparently a red theme. Laughing

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.

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

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