如何更改已禁用复选框的选中颜色

Question

I am having labels and checkboxes in table. but when the screen is read-only, the checkbox and other input elements become disabled and the check box check visibility decreased. I need to make the checkmark look more visible either by changing the color of the check mark or increasing the brightness of the check border.

HTML:

 <table> <tr> <th colspan="3" style="width: 1800px;"> <asp:Literal ID="litLabel" runat="server" Text="Service Team" /> </th> </tr> <tr id="trSignature" runat="server"> <td class="boldfont "> &nbsp;&nbsp; <asp:Label ID="lblSignature" runat="server" Text="61" /> </td> <td class="boldfont"> &nbsp;<input ID="tlblSignature" runat="server" LabelForControl="lblSignature" Text="Certification of Service Coordinator Signature" IsRequiredField="false" /> </td> <td class="ControlLayoutWidth"> &nbsp;<input type="checkbox" ID="chkSignature" runat="server" IsRequiredField="false" FriendlyFieldName="Signature" AutoPostBack="true"> </> </td> </tr> </table>

this is how it looked on the UI, which is hard to see the checkbox

I tried to do it with the same CSS from this page http://jsfiddle.net/5g3w32ug/ , but the check box is not visible at all. Please let me know how can we achieve this.

Answer 1

Give high priority to the checkbox: checked styles...

 input[type="checkbox"]:checked + label::after { content: ''; position: absolute; width: 1.2ex; height: 0.4ex; background: rgba(0, 0, 0, 0); top: 0.9ex; left: 0.4ex; border: 3px solid blue; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } input[type="checkbox"]:checked + label::before{ background-color:#FFA500; } input[type="checkbox"] { line-height: 2.1ex; } input[type="radio"], input[type="checkbox"] { position: absolute; left: -999em; } input[type="checkbox"] + label { position: relative; overflow: hidden; cursor: pointer; } input[type="checkbox"] + label::before { content: ""; display: inline-block; vertical-align: -25%; height: 2ex; width: 2ex; background-color: white; border: 1px solid rgb(166, 166, 166); border-radius: 4px; box-shadow: inset 0 2px 5px rgba(0,0,0,0.25); margin-right: 0.5em; }

 <input type="checkbox" name="genres" value="adventure" id="adventure_id"> <label for="adventure_id" style="font-family: 'SExtralight'; font-size:14px;">Adventure</label>