jeudi 4 juin 2015

Force label tag on ASP checkbox or get a proper way to design the checkbox without being followed by a label tag

I use some CSS to redesign my checkboxes:

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.

The specific case are checkboxes in a GridView that is part of an UpdatePanel. Fixing this "optimizing behavior" of Microsoft by using JavaScript is out my possible solutions, because it would require me to somehow hook the JavaScript call into the parent UpdatePanel.

Is there a better solution that is reliable for all cases?

JSBIN Example (Preview)

Aucun commentaire:

Enregistrer un commentaire