HTML - radio button design - how to change? - HTML Forums

module23 · 09-22-2005, 01:39 PM

Hi there,

actually I made most of my sites in flash, but now I'm confronted with a html-problem and hope you guys can handle that.

You all know this tiny radio buttons, a button that changes his state after click and gives a message when is activated. Now I need to change the design of this button, so I need a square as button and on click there should be a huge cross over the square. Hope you know what I mean?! How can I solve this problem without using flash?

regards

sebastian

_Aerospace_Eng_ · 09-22-2005, 01:53 PM

You can use a checkbox but it won't be a huge cross, it will be a check. You will need to get creative with the use of some javascript. With that said I'm moving this to the client side forum. It would be a lot easier to do what you want in flash. Maybe you can tell us what exactly you want to do with this box.

AaronCampbell · 09-22-2005, 02:51 PM

You could use Javascript to replace your checkboxes with custom images. Unfortunately, unlike other form elements, radio buttons and checkboxes are VERY limited in the amount of styling that can be done. However, with Javascript, you can remove the box, and replace it with an image. SlayerOffice.com has a writeup on it

birdbrain · 09-22-2005, 03:10 PM

Hi there module23,

have a look at this button

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>huge cross</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<meta name="Content-Script-Type" content="text/javascript"/>
<meta name="Content-Style-Type" content="text/css"/>
<style type="text/css">
<!--
body {
     background-color:#ddd;  
 }
.container {
     width:60px;
     border-top:4px solid #ccc;
     border-right:4px solid #666;
     border-bottom:4px solid #666;
     border-left:4px solid #ccc;
     background-color:#fefefe;  
     padding:15px 0px;
     text-align: center;
     margin:40px auto;
 }
.but {
     width:30px;
     height:30px;
     font-family:courier,monospace;
     font-size:24px;
     color:#000;
     font-weight:bold;  
     background-color:#d4d0c8;  
 }
-->
</style>
<script type="text/javascript">
<!--
function hugeCross(inp,num) {
var message=new Array();
      message[0]= 'you have clicked button number '+num;   
      message[1]= 'you have clicked button number '+num;
     inp.value='X';
     alert(message[num])
 }
//-->
</script>

</head>
<body>

<div class="container">
<input class="but" type="button" onclick="hugeCross(this,0)" onfocus="this.blur()"/>
</div>

<div class="container">
<input class="but" type="button" onclick="hugeCross(this,1)" onfocus="this.blur()"/>
</div>

</body>
</html>

module23 · 09-23-2005, 02:39 PM

oh great..thanks...that will do

'

birdbrain · 09-23-2005, 02:53 PM

You're welcome.