• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 806
  • Last Modified:

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
0
LosBear
Asked:
LosBear
  • 3
  • 3
  • 2
1 Solution
 
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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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
 
LosBearAuthor Commented:
You are a genius!!
Ok, I give you points now (125 x 2 = 250)

Cya around

Bear
0

Featured Post

Learn to develop an Android App

Want to increase your earning potential in 2018? Pad your resume with app building experience. Learn how with this hands-on course.

  • 3
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now