simple css3 checkbox and radio button

Sample Check Box

Sample Radio Button

outPut of Below Code

This simple check box and radio button can be used for iPhone, iPad, android or standard browser based application.  Here we use css3 border-radius with gradient colors. The style of these types are define as:

<style>

.CheckBoxButton
{
  border-radius:5px;
  background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.10, #2a8ce0), color-stop(0.90, #96d0f6) );
  background-image: -moz-linear-gradient(center bottom, #2a8ce0 10%,#96d0f6 90% );
  height:44px;
  margin-top:10px;
  margin-left:10px;
  float:left;
  min-width:14%;
  width:auto;
}

.CheckBox
{
  float:left;
  width:9.5%;
  margin-top:10px;
  margin-left:10px;
}

.CheckBoxText
{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #ffffff;
  text-align: left;
  line-height:42px;
  float:left;
  padding-left:10px;
  padding-right:5px;
}

.CheckBoxButton_selected
{
  border-radius:5px;
  background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.10, #545353), color-stop(0.90, #9f9f9f) );
  background-image: -moz-linear-gradient(center bottom, #545353 10%,#9f9f9f 90% );
  background-color:#7cc3f0;
  height:44px;
  margin-top:10px;
  margin-left:10px;
  float:left;
  min-width:14%;
  width:auto;
}

</style>

You can use these styles classes in the body tag of your html page as following:

<div id=”divCheckbox” class=”CheckBoxButton” onclick=”ChangeStyle(‘chkCheckbox’, ‘divCheckbox’)“>

                <div class=”CheckBox“><input id=”chkCheckbox” type=”checkbox” /></div>

                <div class=”CheckBoxText“><Label >Sample Check Box</Label></div>

</div>

<div id=”divRadio” onclick=”ChangeStyle(‘chkRadio’, ‘divRadio’)” class=”CheckBoxButton“>

                <div class=”CheckBox“><input id=”chkRadio” type=”radio” /></div>

                <div class=”CheckBoxText“><Label >Sample Radio Button</Label></div>

</div>

Whenever the ‘checkbox’ or radio button is clicked a JavaScript function ChangeStyle is called by taking the parameters of check box or radio button id and div container id.  It changes the style of  check box at run time. let’s take a look on JavaScript function.

<script language="javascript" type="text/javascript">
    function CheckBoxStatus(chkBoxID, btnID) {
      if (document.getElementById(chkBoxID).checked) {
           document.getElementById(chkBoxID).checked = false;
           document.getElementById(btnID).setAttribute("class", "CheckBoxButton_selected");
      }
      else {
           document.getElementById(btnID).setAttribute("class", "CheckBoxButton");
           document.getElementById(chkBoxID).checked = true;
      }
}
</script>

Posted in: CSS3