Solved

Styling Checkboxes and Radio Buttons

Posted on 2003-11-03
8
770 Views
Last Modified: 2011-04-14
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
Comment
Question by:LosBear
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
8 Comments
 
LVL 35

Expert Comment

by:YZlat
ID: 9676402
<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
 
LVL 35

Expert Comment

by:YZlat
ID: 9676423
or try this:

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

</body>
</html>
0
 
LVL 1

Author Comment

by:LosBear
ID: 9678597
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9678923
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
 
LVL 1

Author Comment

by:LosBear
ID: 9679001
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
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9679182
Hi,

   be back in a sec

Vinny
0
 
LVL 15

Accepted Solution

by:
VincentPuglia earned 250 total points
ID: 9679902
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
 
LVL 1

Author Comment

by:LosBear
ID: 9680208
You are a genius!!
Ok, I give you points now (125 x 2 = 250)

Cya around

Bear
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: Matthew
I am a very big proponent of technology compliance standards and strive to meet such criteria in all of my work. That includes my site, which is 100% XHTML 1.0 compliant as determined by the World Wide Web Consortium. https://www.matthewstevenkel…
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question