Question

我正在尝试通过编辑Theme的style.css来改变Wordpress插件中复选框的样式。我已经尝试了几个Css选项，但我没有让它在复选框的默认样式上表示叠加图像。这是结构：

<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>

我试过这个但不行：

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');
}

提前致谢。

Answer 1

您是否尝试过从插件css文件更改插件css？

wp-content / plugins /（你的插件）

在那里寻找一个css文件

或者，这不是最佳解决方案，但......

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;
}

Answer 2

将不透明度设置为0时，会影响所有剩余样式。设置复选框样式的技巧是使另一个对象（例如，标签）保存图像。这是一个教程，提供了几个这样做的例子：https://paulund.co.uk/style-checkboxes-with-css

Answer 3

你可以在你的子主题中为插件创建一个子css，这样一个更安全的选项，我认为可以用css3设置一个复选框样式，看看这个答案他的链接：https://stackoverflow.com/a/4148544/7862006

设置Wordpress插件复选框

3 个答案: