PDA

View Full Version : HTML - radio button design - how to change?

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 (http://slayeroffice.com/code/custom_checkbox/)
birdbrain
09-22-2005, 03:10 PM
Hi there module23,

have a look at this button
<!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. :)