Hide checkbox text using CSS/Javascript

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

simply add a checkbox in item template of first template field. you don't need any text to display it — Vikas Rana
– Vikas Rana, Commented Jun 25, 2014 at 11:29
@VikasRana : Yes, I have added that but the css doesn't get applied if I don't add any text to it. — Tapas Mahata
– Tapas Mahata, Commented Jun 25, 2014 at 11:31
Of course. Your css styles the labels which immediately follow the checkboxes. Now you don't have labels, how do you think that css will apply. It will only hide the checkboxes as you have specified opacity as 0. — Abhitalks
– Abhitalks, Commented Jun 25, 2014 at 11:33
@abhitalks: So, how to do this? I need checkbox with and w/o label but need single css for this.. please help — Tapas Mahata
– Tapas Mahata, Commented Jun 25, 2014 at 11:34

Abhitalks · Accepted Answer · 2014-06-25 11:39:59Z

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

answered Jun 25, 2014 at 11:39

Abhitalks

28.5k6 gold badges61 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tapas Mahata Over a year ago

This looks pretty in browsers except IE9 but I need the same looks in IE9.

Abhitalks Over a year ago

It degrades gracefully in IE.

Collectives™ on Stack Overflow

Hide checkbox text using CSS/Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related