Styling Checkboxes and Radio Buttons

Ugh, I just asked this question for the <select> box, and now asking it for the radio buttons and select buttons.  For those of you who have seen what a checkbox and radio  control looks like in VB6 when it's flat, that's what I need for HTML, etc.

Others, I need a single pixel border for the radio and the checkbox - NO 3D look at ALL.

See an image I created at http://www.losbear.com/flatbuttons.gif

This has probably been answered before, so I generously offer 125 points to the winner.

Please help!
Bear
LVL 1
LosBearAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

YZlatCommented:
<html>
<head>
<style>
.checkbox
{
font-family:webdings;
position:relative;
font-size:18px;
color:#333399;
top:-4;
left:-2px;
}
.checkbox_wrapper
{
width:15px;
height:15px;
overflow:hidden;
border:1px solid ;
cursor:hand;
}

</style>

</head>
<body>
<form>
<div class="checkbox_wrapper"><span class="checkbox"></span></div>
<br>

<input style="border-style:none;color:#333399" type="radio"><span class="radio"/>

</form>

</body>
</html>
0
YZlatCommented:
or try this:

<html>
<body>
<br><br>
<input type="radio" class="radio">
<br><br>
<input type="checkbox" class="checkbox">

</body>
</html>
0
LosBearAuthor Commented:
yz-
didn't work....
i see you tried to use webdings to create the box...
i need them to be actual form components (IE: "<INPUT...")
second example didn't work either.
Need it to work in IE5.0+
thx

Bear
0
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

VincentPugliaCommented:
Hi,
  if it is just the appearance you want, the following should work (tested in IE6 & NN6.1, though with pseudo images)

<html><head>
<script language='javascript' type='text/javascript'>
<!--
function doit(obj, inputID)
{
  inpObj = document.getElementById(inputID);
  inpObj.checked = (inpObj.checked) ? false : true;
// the following is for your testing only; delete
formObj = document.a;
for (i = 0 ; i < formObj.length; i++)
{
  el = formObj.elements[i];
  alert(el.checked + ' ' + el.value)
}
}
//-->
</script>
</head>
<body>
<form name='a'>
<a href="#" onclick="doit(this,'chk1');return false"><img src="chk.gif"><input type="checkbox" name='chk1' id='chk1' value='0' style='display:none'></a>Option 1
<a href="#" onclick="doit(this,'rad1');return false"><img src="rad.gif"><input type="radio" name='rad1' id='rad1' style='display:none' value='1'></a>Option 1
<a href="#" onclick="doit(this,'rad2');return false"><img src="rad.gif"><input type="radio" name='rad1' id='rad2' value='2' style='display:none'></a>Option 2
</body>
</html>

Vinny
0
LosBearAuthor Commented:
i suck at javascript - if u r proficient at it, how about ....

every time I click on it, it changes a hidden input field to alternet between 0 and 1 at the same time an image resembling a checkbox or radio switches between check_off.gif and check_on.gif

this would "appear" to be working, and we can use the hidden field to pass to next page....
I'll double the points if you accomplish this :-)

Radio buttons would be a pain..........
0
VincentPugliaCommented:
Hi,

   be back in a sec

Vinny
0
VincentPugliaCommented:
Hi,

Like this?

<html><head>
<script type="text/javascript" language="javascript">
<!--
//---------------------------------------------------------
//    author: Vincent Puglia
//    site:   http://members.aol.com/grassblad
//---------------------------------------------------------

function doit(obj, inputID)
{
  var numofRads = 2;

  inpObj = document.getElementById(inputID);
  inpObj.value = (inpObj.value == '0') ? 1 : 0;

  imgSrc = obj.firstChild.src;
  theImg = imgSrc.substring(imgSrc.lastIndexOf("/")+1,imgSrc.indexOf("."))

  if (inputID == 'hidRad')
  {
    for (i = 0; i < numofRads; i++)
    {
       imgName = 'rad' + i

       document.images[imgName].src =  (document.images[imgName].src.indexOf('unchkRad') != -1) ? 'chkRad.gif' : 'unchkRad.gif'

    }
 }
 else
 {

  document.images['chk'].src = (document.images['chk'].src.indexOf('unchecked') != -1) ? 'checked.gif' : 'unchecked.gif'
  }

  formObj = document.a
  for (var i = 0; i < formObj.length; i++)
  {
    el = formObj.elements[i]
    alert(el.id + ' ' + el.value)
  }

}

//-->
</script>
</head>
<body>
<table>
<tr><td>
<a href="#"  onclick="doit(this, 'hidChk')"><img style="border:none" src="unchecked.gif" name='chk'></a>Check</td><td>
<a href="#" onclick="doit(this, 'hidRad')"><img src="chkRad.GIF"  style="border:none" name='rad0'></a>On</td><td>
<a href="#" onclick="doit(this, 'hidRad')"><img src="unchkRad.GIF" style="border:none" name='rad1'></a>Off</td></tr></table>
<form name='a'>
<input type="hidden" name="chk1" id='hidChk' value="0">
<input type="hidden" name="rad1" id='hidRad' value="1">
</form>
</body>
</html>

Vinny
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
LosBearAuthor Commented:
You are a genius!!
Ok, I give you points now (125 x 2 = 250)

Cya around

Bear
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.