風格的Wordpress插件複選框

我試圖通過編輯主題的style.css從Wordpress的插件更改複選框的風格。我已經嘗試了幾個與Css的選項，但我沒有得到它代表複選框的默認樣式的覆蓋圖像。這是結構：提前風格的Wordpress插件複選框

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

感謝：

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

我都試過，但不起作用。

來源

2017-05-14 user19566

你得到什麼結果呢？ – inarilo

我認爲這是一個特殊問題，除非您爲我們重現問題，否則我們無法真正提供幫助，因此我們可以告訴您如何以更高的特異性或任何問題爲目標來定位這些元素。你能否包含重現問題所需的相關CSS？瞭解如何創建[mcve] –

只有在編輯容器的位置和大小時才能獲得唯一的結果，但僅限於該特性。 – user19566

你試過從插件css文件改變了插件的css？

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

外觀的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; 
}

來源

2017-05-14 18:52:28

更新後可能會被覆蓋。 – inarilo

關於直接在主題的Style.css中創建的樣式的版本，我沒有修改插件的樣式。我會嘗試這個選項並評論結果。謝謝。 – user19566

在插件中，我可以找到兩個文件.css，plugin.style.css和style.css。我編輯了輸入元素的id（type = checkbox），但它仍然不會更改其默認方面。當您更改容器的背景圖像時，如果項目出現但僅顯示容器。 – user19566

當您設置不透明度爲0，會影響所有剩餘的樣式。樣式化複選框的技巧是擁有另一個保存圖像的對象（例如標籤）。這裏有一個教程，給出了幾個這樣做的例子：https://paulund.co.uk/style-checkboxes-with-css

來源

2017-05-14 19:05:20 WahhabB

遵循這個很好的教程，通過鏈接指示我，我不能編輯複選框的風格只有容器大小的特徵。 – user19566

你可以在你的子主題內爲插件創建一個子css，所以這將是一個更安全的選項，我認爲可以用一個複選框CSS3，看看這個回答他的鏈接：https://stackoverflow.com/a/4148544/7862006

來源

2017-05-14 20:58:29

風格的Wordpress插件複選框

回答

相關問題