Hide checkbox text using CSS/Javascript - html

Question

I have a gridview and the first column has a checkbox to select every row. I have written some CSS for the checkbox but as the checkbox doesn't have any text within it nothing is displayed. If I include any text in the checkbox then the CSS works fine.
I don't need text or to hide the text (if dummy required) to make the look and feel the same throughout.
This is my CSS:
input[type="checkbox"] {
position:absolute;
opacity: 0;
-moz-opacity: 0;
-webkit-opacity: 0;
-o-opacity: 0;
}
input[type="checkbox"] + label {
position:relative;
padding: 3px 0 0 25px;
}
input[type="checkbox"] + label:before {
content:"";
display:block;
position:absolute;
top:2px;
height: 12px;
width: 12px;
background: white;
border: 1px solid gray;
box-shadow: inset 0px 0px 0px 2px white;
-webkit-box-shadow: inset 0px 0px 0px 2px white;
-moz-box-shadow: inset 0px 0px 0px 2px white;
-o-box-shadow: inset 0px 0px 0px 2px white;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
}
input[type="checkbox"]:checked + label:before {
background: #88bbd4;
}
I need the grid column like the image shown here:

Answer 1

Your CSS just doesn't sync with what you are after. You don't need all that stuff. And why border-radius? Do you want them to look like radio buttons?
What you could do is simply this:
Demo: http://jsfiddle.net/abhitalks/ZdyC7/
CSS:
input[type="checkbox"]::after {
content: '';
display: inline-block;
width: 16px; height: 16px;
background-color: white;
border: 1px solid gray;
box-shadow: inset 0px 0px 0px 2px white;
-webkit-box-shadow: inset 0px 0px 0px 2px white;
-moz-box-shadow: inset 0px 0px 0px 2px white;
-o-box-shadow: inset 0px 0px 0px 2px white;
}
input[type="checkbox"]:checked::after {
background-color: red;
}