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)

回答1:

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>

回答2:

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.

回答3:

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.

回答4:

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.

来源：https://stackoverflow.com/questions/30654890/get-a-proper-way-to-design-the-checkbox-without-being-followed-by-a-label-tag

标签

html

css

ASP.NET

checkbox