CODEWITHSUNDEEP
javascripthtmlcss
Khush
Khush

Reputation: 877

Styling Checkbox

I am trying to insert an image instead of a check on the check box. The code that am using is:

<html>
<head>
<style>
.bl {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #175899), color-stop(0.5, #7da4bf), color-stop(3, #9fbed3));
width: 90%;
height:30px;
border-radius: 5px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
margin-bottom:10px;
}
p
{
font-family:"Times New Roman";
font-size:10px;
}

checkbox
{
  width: 75px;
  height: 75px;
  padding: 0 5px 0 0;
  background: url(images/Green_tick.png) no-repeat;
  display: block;
  clear: left;
  float: left;
}

.checked {
  position: absolute;
  width: 200px;
  height: 21px;
  padding: 0 24px 0 8px;
  color: #fff;
  font: 12px/21px arial,sans-serif;
  background: url(images/Green_tick.png) no-repeat;
  overflow: hidden;
}

</style>
</head>

<body>
<script>
function Checked(id)
{
if(id.checked==1)
{
    alert("Checked");
}
else
{
    alert("You didn't check it! Let me check it for you.")
        id.checked = 1;

}
}

</script>

<div class="main_menu">
    <a id='menu' href="javascript:" onclick="loadMenuPage();"></a>
</div>
<p>
All verifications required for QR7 can be uploaded here. Any item which still requires verification is
marked in red until picture has been attached.
</p>
<div class="bl">  
<input type="checkbox" id="checkbox" class="checkbox" onclick="Checked(id);"> Income </input>
</div>
<div class="bl">  
<input type="checkbox" id="checkbox" class="checkbox" onclick="Checked(id);"> Property </input>
</div>
<div class="bl">  
<input type="checkbox" id="checkbox" class="checkbox" onclick="Checked(id);"> Court Order Child Support </input>
</div>
<div class="bl">  
<input type="checkbox" id="checkbox" class="checkbox" onclick="Checked(id);"> Future Medical Child Support </input>
</div>

</body>
</html>

Any suggestions on how do i achieve it. As of now i get a normal tick in the checkbox.

Thanks in advance.

Upvotes: 1

Views: 1715

Answers (2)

service-paradis
service-paradis

Reputation: 3398

This post is old but this is what i suggest:

Associate labels to your checkboxes like this:

<input type="checkbox" value="1" id="c1" />
<label class="check" for="c1"></label>

Hide your checkboxes using css:

.checkboxes input[type=checkbox]{
  display:none
}

Style the label as you want to. I created a simple snippet that fully demonstrate how to use personnalise checkboxes. I use background-color in this example, but you could easily use your background image instead.

.checkboxes .check{
    background-color:#c5e043;
    display:inline-block;
    width:30px;
    height:30px
}

.checkboxes input[type=checkbox]{
    display:none
}

.checkboxes input[type=checkbox]:checked + .check{
    position:relative;
    background-color:#241009
}

.checkboxes input[type=checkbox]:checked + .check:after{
    position:absolute;
    content:"\2714";
    color:#fff;
    text-align:center;
    width:100%
}
<div class="checkboxes">
    <input type="checkbox" value="1" id="c1" checked="checked" />
    <label class="check" for="c1"></label>
    <input type="checkbox" name="rGroup" id="c2" />
    <label class="check" for="c2"></label>
    <input type="checkbox" name="rGroup" id="c3" />
    <label class="check" for="c3"></label>
</div>

Here is the jsfiddle

Upvotes: 2

Deadkat7
Deadkat7

Reputation: 53

Styling checkboxes using CSS is a nightmare and you'll never achieve the look you want. Try using a jQuery plugin, most of them 'hide' the checkbox by positioning the input off the visible screen and use a span replacement with a background image that you can edit to suit your needs. Something like: http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/

Also check this thread: Pure CSS Checkbox Image replacement

Upvotes: 1

Related Questions