Geek Answers Handbook

Get the correct way to create a flag that is not followed by a tag tag

I use some CSS to override 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>
Run codeHide result

This works as long as I set the property of Textmy ASP code to something that is not nulland String.Empty. When I do not install it or install it on an empty line, the HTML generated will not contain the tag label, so my CSS will not work.

Is there a way to create a checkbox without the next tag tag?

JSBIN Example (Preview)

+4
source share
4 answers

CSS , CSS, ASP . .

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>
Hide result
+12

, , . - JS , , , :

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>
Hide result

for, click . <i>, , <input> :checked.

, , , , <i> , &nbsp; font-size 0.

+3

, . : : , , Chrome, : : . - Chrome, .

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 -->
Hide result

, , , visibility: hidden , visibility: visible : . . Firefox.

+1

//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");
    }
});

.

+1
source

More articles:


All Articles