Solved

Styling Checkboxes and Radio Buttons

Posted on 2003-11-03
8
779 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
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!

 
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

Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

Question has a verified solution.

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

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

726 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