Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Styling Checkboxes and Radio Buttons

Posted on 2003-11-03
8
Medium Priority
?
795 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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 1000 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

Technology Partners: 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

Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
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 …
The viewer will learn how to count occurrences of each item in an array.
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…

609 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