CODEWITHSUNDEEP
htmlcssasp.net
Tapas Mahata
Tapas Mahata

Reputation: 351

Hide checkbox text using CSS/Javascript

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: enter image description here

Upvotes: 0

Views: 652

Answers (1)

Abhitalks
Abhitalks

Reputation: 28387

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;
}

Upvotes: 1

Related Questions