Styling checkboxes

Datagaard

Is it possible to style a checkbox in the editor to something similar to iCheck?

Attached image.

The code I used for the dataTable is

{
     "data": "TeleMedApplications.Inactive",
     "render": function (data, type, row){
      if (type === 'display'){
    return '<div><input type="checkbox" id="' + row.DT_RowId + '" class="editor-active"><label for="' + row.DT_RowId + '">  <span></span></label></div>';               
     }
    return data;                
},
 "className": "dt-body-center"
}

Css:
/* Style Checkboxes */
input[type="checkbox"]{
    /*display: none;*/
    float: left;
    width: 0px;
    opacity: 0;
    height: 1px;
}
input[type="checkbox"] + label span{
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: -1px 4px 0 0;
    vertical-align: middle;
    background: url(../Images/green.png) left top no-repeat;
    cursor: pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(../Images/green.png) -48px top no-repeat;
}
input[type="checkbox"]:checked:hover + label span {
    background:url(../Images/green.png) -48px top no-repeat;
}
input[type="checkbox"]:hover + label span {
    background:url(../Images/green.png) -24px top no-repeat;
}
input[type="checkbox"]:focus + label span {
    background:url(../Images/blue.png) -24px top no-repeat;
}
input[type="checkbox"]:checked:focus + label span {
    background:url(../Images/blue.png) -48px top no-repeat;
}
input[type="checkbox"]:disabled + label span {
    background:url(../Images/green.png) -71px top no-repeat;
}
input[type="checkbox"]:disabled:checked + label span {
    background:url(../Images/green.png) -95px top no-repeat;
}

allan

If that is is a regular HTML checkbox which has been styled, then yes. Editor uses just plain <input type="checkbox">. As far as I am aware, they can't be reliably styled across browsers and platforms though.

Allan

Datagaard

Pity, it would be nice to be able to style the editor check box other than the boring default.

F12Magic

You could add a specific css for custom checkboxes. Look at this codepen:
https://codepen.io/CreativeJuiz/pen/BiHzp
It works on all modern browsers and has automatic fallback on IE8 and lower.

allan

Nice link @F12Magic - thanks for sharing that with us.

Allan

Datagaard

Thanks F12Magic,

I had something similar in my original post, it was displaying okay for the dataTable, But I couldn't seem to get it to work in the Editor.

allan

It will be to do with the CSS selectors probably. If you have a link to the page showing the issue I would be happy to take a look.

Allan

Datagaard

HI Allan,

Thanks for the offer. How can I get the zipped file to you

allan

You could upload it here. However, it would allow me to respond much quicker if you could give me a link to the page showing the issue so I can immediately debug it.

Allan

F12Magic

I have no experience with the editor, but if you're using some sort of styling like bootstrap or jquery UI, make sure you're loading the custom css after these css files to overrule them.

Datagaard

HI Allan,

Sorry for the delay, have been away over weekend.

Attached zip file for assistance..

Datagaard

Hi F12Magic,

Yes I have my custome css styling last in line.

Thanks

F12Magic

It's a problem with your css selectors.
When I replace your checkbox selectors with the ones from the link I provided, everything works as aspected. See the screenshot.

Datagaard

Hi f12Magic,

Would you be able to send me the altered css then.

Much appreciated.

F12Magic

OK two files uploaded in the attached zip. Your main.css but adjusted and using images for checkboxes and radio buttons.
The second file, main_pure_css.css uses css only to style the checkboxes.
If you want to style the radio buttons too, copy the checkbox css and then replace checkbox with radio in the selectors. Then play a little with the other css to make everything round instead of square.

Datagaard

Much appreciated F12Magic.

I will have to ask though, is it possible to get my original checkbox style to work?

Regards

F12Magic

Your welcome.
Maybe I explained it a bit weird. The file main.css in the zip, is your original styled checkbox and radiobutton (using the green.png image). See attached image.
The other file is just there to show checkbox styling only using css. So you don't really need the second file.

Datagaard

Thanks F12Magic.

Got it now.