I’m trying to change the style of a checkbox from a plugin for WordPress by editing Theme’s style.css. I have tried several options with Css but I do not get it to represent an overlay image on the default style of the checkboxes.
This is the structure:

<div id="box-1" class="box">
    <label for="var_1">
    <input id="var_1" name="variable_1" data-type="checkbox" data-req="" data-message="" type="checkbox">
    Variable 1
    </label>        
    </div>

I have tried this but not work:

input[type=checkbox] {
    opacity: 0;
    float: left;
    width: 18px;
}
input[type=checkbox] {
    margin: 0;
    clear: none;
    padding: 5px 0 4px 24px;
    cursor: pointer;
    background: url('images/overlay_image.png');
}

Thanks in advance.

Read more here: Style a WordPress plugin checkbox


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: