Style a Wordpress plugin checkbox

Question

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.

I'm assuming it's a specificity issue, and we can't really help unless you reproduce the issue for us so we can tell how to target these elements with higher specificity or whatever the problem is. Can you include the relevant CSS needed to reproduce the problem? See how to create a [mcve] — Michael Coker, May 14 '17 at 18:55
The only results obtained are appreciated when editing the position and size of the container but only that characteristic. — user19566, May 14 '17 at 19:45

Quicky App · Answer 1 · 2017-05-14T18:54:08.200

1

Have you tried changing the plugin css from the plugin css file?

wp-content/plugins/(your plugin)

look for a css file there

or, this is not the best solution but...

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

edited May 14 '17 at 18:54

answered May 14 '17 at 18:52

Quicky App

123
2
14

The editions about the style I made directly on the Style.css of the theme, I have not gotten to modify the style of the plugin. I will try this option and comment results. Thank you. – user19566 May 14 '17 at 19:51
In the plugin I could find two files .css, plugin.style.css and style.css. I have edited the id of the input element (type = checkbox) but it still does not change its default aspect. When you change the background image of the container, if the items appear but only the container. – user19566 May 15 '17 at 14:17

score 1 · Answer 2 · answered May 14 '17 at 19:05

1

When you set the opacity to 0, that affects all your remaining styling. The trick to styling a checkbox is to have another object (for example, the label) that holds the image. Here is a tutorial that gives several examples of doing this: https://paulund.co.uk/style-checkboxes-with-css

answered May 14 '17 at 19:05

WahhabB

520
3
8

Following this good tutorial that indicates to me through the link, I can not edit the style of the checkbox only characteristics of size of the container. – user19566 May 14 '17 at 19:49

score 1 · Answer 3 · edited May 23 '17 at 11:47

1

You can create a child css for the plugin inside your child theme, so that would be a safer option, and i think it is possible to style a checkbox with css3, check out this answer his links: https://stackoverflow.com/a/4148544/7862006

edited May 23 '17 at 11:47

Community

1
1

answered May 14 '17 at 20:58

K. Tromp

350
1
13

Style a Wordpress plugin checkbox

3 Answers3