Menu
I use some CSS to redesign my checkboxes in ASP.NET:
input[type=checkbox] {
display: none !important;
cursor: pointer;
}
input[type=checkbox]:not([disabled]) + label {
cursor: pointer;
}
input[type=checkbox] + label:before {
position: relative!important;
padding-right: 3px;
top: 1px;
font-family: 'Arial' !important;
font-style: normal;
font-weight: normal;
content: "O";
color: #333;
}
input[type=checkbox]:checked + label:before {
content: "X";
color: #ffa500;
}<input type="checkbox" id="myCheckbox"><label for="myCheckbox">Click</label>This works as long as I set the Text property of my ASP checkbox to something that is neither null nor String.Empty. When I don't set it or set it to an empty string, the produced HTML will not contain the followed label tag, thus my CSS will not work.
Is there a way to design the checkbox without a following label tag?
JSBIN Example (Preview)
592
To get your CSS to work, it would be much easier to modify the CSS than trying to get ASP to play nice. Here's a working version based off the inputs instead of the wonky labels.
input[type=checkbox] {
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0
}
input[type=checkbox]:after {
padding-right: 3px;
top: 1px;
font-family: 'Arial' !important;
font-style: normal;
font-weight: normal;
font-size: 18px;
content: "O";
color: #333;
display:block;
}
input[type=checkbox]:checked:after {
content: "X";
color: #ffa500;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<input id="cb1" type="checkbox" name="x$cb1" checked="checked"></input><label for="cb1"></label>
<br />
<input id="cb1" type="checkbox" name="x$cb2" checked="checked"><!-- not visible -->
</body>
</html>So, I wasn't able to get it working with just an checkbox input because you can't apply pseudo elements to inputs. But this solution doesn't rely on any JS and would give you complete stylistic control over what the checkbox should look like, even allowing you to set a disabled state on the input should you need it:
input[type="checkbox"] {
display: none;
}
label i:before {
position: relative;
padding-right: 3px;
top: 1px;
font-family: 'Arial';
font-style: normal;
font-weight: normal;
content: "O";
color: #333;
}
label input:checked + i:before {
content: "X";
color: #ffa500;
}
label input[disabled] + i:before {
opacity: .25;
}<label>
<input type="checkbox">
<i></i>
</label>The label doesn't require a for attribute since it's wrapping the input, and will act as the click handler for you. I needed the <i> element, because there's no way for me to tell if a child <input> is :checked.
Hopefully this helps, not sure if it'll work if the <i> element is empty, but you could always add a inside and set the font-size to 0.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
