modiX modiX - 3 months ago 9
ASP.NET (C#) Question

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


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)

Answer

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>

Comments