CODEWITHSUNDEEP
htmlcssasp.netcheckbox
Martin Braun
Martin Braun

Reputation: 12579

Get a proper way to design the checkbox without being followed by a label tag

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)

Upvotes: 5

Views: 9744

Answers (4)

shashank obulampalli
shashank obulampalli

Reputation: 351

I don't think there is way to design the checkbox without an external tag. Because you can't semantically apply :after or :before pseudo elements on non container elements, the exception to this rule is chrome browser where we can apply :after and :before to non container elements. If you want to run your web application in chrome browser please follow the below code. 

input[type=checkbox] { 
  visibility: hidden;
  cursor: pointer;
}

input[type=checkbox]:before {
  position: relative !important;
  padding-right: 3px;
  top: 1px;
  font-family: 'Arial' !important;
  font-style: normal;
  font-weight: normal;
  content: "O";
  color: #333;
  visibility: visible;
}
input[type=checkbox]:checked:before {
  content: "X";
  color: #ffa500;
}
<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 -->

Please have a look at the snippet the way the code works is by using visibility: hidden on the parent and then visibility: visible on the child :before pseudo element. Note: this will not work on firefox browser.

Upvotes: 1

Benjamin Solum
Benjamin Solum

Reputation: 2321

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 &nbsp; inside and set the font-size to 0.

Upvotes: 3

Akhilesh Kumar
Akhilesh Kumar

Reputation: 9355

Don't use checkbox just try

//HTML
<span class="my-custom-checkbox">
    <i class="fa fa-check" style="visibility:hidden"></i>
</span>

//CSS

.my-custom-checkbox{
    border:1px solid #555;
    border-radias:4px;
    height:8px;
    width:8px;
}
.my-custom-checkbox>i{
    color:#555;
}

// jQuery code

$(".my-custom-checkbox").click(function(event){
    var selector=$(this).find("i.fa");

    if(selector.css("visibility")=="hidden"){
        selector.css("visibility","visible");
    }
    else{
        selector.css("visibility","hidden");
    }
});

This type of straightgy will give you freedom to implement your need with low cost of effort.

Upvotes: 1

Blake Petersen
Blake Petersen

Reputation: 993

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>

Upvotes: 14

Related Questions