風格複選框作爲切換按鈕

在我的網站上，用戶可以發佈文章並使用一些預先設置的標籤對其進行標記。這些標籤是以複選框的形式出現的。下面的例子：風格複選框作爲切換按鈕

<input type="checkbox" name="wpuf_post_tags[]" class="new-post-tags" value="Aliens" /> Aliens 
<input type="checkbox" name="wpuf_post_tags[]" class="new-post-tags" value="Ghosts" /> Ghosts 
<input type="checkbox" name="wpuf_post_tags[]" class="new-post-tags" value="Monsters" /> Monsters

正如你可能知道，複選框會是這個樣子：

[]外國人

[O]鬼

[]怪獸

我想要做的是有複選框是一個大按鈕與裏面的價值。然後使其具有「切換」效果。

[外星人] [看盤] [怪物]

我怎麼會去這樣做呢？

來源

2013-03-15 Swen

你有一個在線激勵你的例子嗎？ – blackhawk 2013-03-15 15:42:52

當你說「切換效果」時，在懸停？上，點擊？它會移動checbox嗎？ – blackhawk 2013-03-15 15:44:10

@blackhawk 我沒有網上的例子激發了我。有了切換效果，我的意思是點擊按鈕時，複選框將被「標記」並保持這種狀態直到表單被提交。之後，所有「標記」複選框將用作文章的標籤。 – Swen 2013-03-15 15:45:06

檢查this出

HTML

<input id="chk_aliens" type="checkbox" name="wpuf_post_tags[]" class="vis-hidden new-post-tags" value="Aliens" /> 
<label for="chk_aliens">Aliens</label> 

<input id="chk_ghosts" type="checkbox" name="wpuf_post_tags[]" class="vis-hidden new-post-tags" value="Ghosts" /> 
<label for="chk_ghosts">Ghosts</label> 

<input id="chk_monsters" type="checkbox" name="wpuf_post_tags[]" class="vis-hidden new-post-tags" value="Monsters" /> 
<label for="chk_monsters">Monsters</label>

CSS

.vis-hidden { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
} 

label { 
    margin: 10px; 
    padding: 5px; 
    border: 1px solid gray; 
} 

input:focus + label { 
    border-color: blue; 
} 

input:checked + label { 
    border-color: red; 
} 

input:focus:checked + label { 
    border-color: green; 
}

注意，最後選擇可能無法在舊的IE瀏覽器。

來源

2013-03-15 15:56:35 Simon

我有一個類似的例子[這裏]（http://jsfiddle.net/cherryflavourpez/r7vXE/），基於[這個CSS忍者文章]（http://www.thecssninja.com/css/custom-inputs-using -CSS）。根據那篇文章，IE8及以下版本不支持'：checked'僞類，所以這些在這些瀏覽器中分崩離析。因此，您需要確保僅向有能力的瀏覽器提供這些樣式 - 一種方法是使用not（）僞類 - 或將它們全部放入媒體查詢中。 – CherryFlavourPez 2013-03-15 16:13:32

@CherryFlavourPez我只是看了你的例子，我真的很喜歡它。然而，我想知道的是，如果我會更好地使用CSS來實現切換效果，或者改用javascript/jquery。您會推薦哪一款？ – Swen 2013-03-15 16:29:38

您也可以使用[條件IE主體類]（http://css-tricks.com/snippets/html/add-body-class-just-for-ie/）並將這些樣式應用於比IE8更新的瀏覽器。因此，在IE8中，您會看到正常的複選框，而對於較新的瀏覽器，您會看到花哨的風格標籤。 – Simon 2013-03-15 16:32:54

Checkboxesradio按鈕和SELECT元素具有非常有限的樣式功能，它們在不同的瀏覽器中有很大差異。

您最好使用樣式化的鏈接或按鈕來完成這些操作，然後使用JavaScript設置實際的開/關外觀和表單值。

來源

2013-03-15 15:45:40

這正是我所說的，造型表單元素是頸部疼痛，尤其是如果它應該是跨瀏覽器。 – Adrenaxus 2013-03-15 15:47:59

切換的按鈕需要通過表單提交。我不知道如何使用樣式化的鏈接或按鈕。 – Swen 2013-03-15 15:48:53

不僅如此，它們每個都有很好的用例。使複選框像單選按鈕一樣具有用戶體驗標準。 – isherwood 2013-03-15 15:48:57

您可能會嘗試使用javascript onclick事件來改變img source屬性。然後，將隱藏的控件與給定的id和onclick事件使用document.getElementById('hiddencontrol').value = 1 - document.getElementById('hiddencontrol').value（默認爲0或1）相關聯。

但是，我不知道如何使它沒有Javascript。

來源

2013-03-15 15:49:02 Voitcus

您可以藉此page的想法！嘗試綁定您的文本和複選框。然後，然後嘗試使用jQuery來「切換」與複選框關聯的標籤。

然後，您可以使用樣式和圖像使標籤看起來像複選框的容器。那是我會做的。

來源

2013-03-15 15:49:57 blackhawk

這可以使用複選框和標籤，相鄰兄弟選擇器 - 和CSS3 :selected僞類完成。

HTML：

<span><input type="checkbox" id="c1"><label for="c1">[ Aliens ]</label></span> 
<span><input type="checkbox" id="c2"><label for="c2">[ Ghosts ]</label></span> 
<span><input type="checkbox" id="c3"><label for="c3">[ Monsters ]</label></span>

CSS：

input { display:none; } 
input:checked ~ label { color:red; }

http://jsfiddle.net/drTg2/

但要知道，這將很容易地在舊的瀏覽器失敗 - 因爲他們不知道~或:checked。如果複選框設置爲display:none，則舊版IE會出現問題 - 在提交表單時（儘管可以通過隱藏其他方法（即屏幕的絕對位置）可以克服此問題，它們不會傳輸它們）。

如果你不堅持純粹的HTML/CSS解決方案 - 那裏有許多腳本/ {js-framework-of-your-choice} - 插件，這有助於達到相同的效果。

來源

2013-03-15 15:52:34 CBroe

這正是我想要做的！在我的網站上使用它會有多「危險」？（隱藏複選框並使用標籤檢查/取消選中它們） – Swen 2013-03-15 15:56:51

這取決於它在每個瀏覽器中的工作原理是多麼重要 - 或者如果您可以忍受它不適用於年齡稍大的瀏覽器...... – CBroe 2013-03-15 15:58:12

請注意，如果您設置display：none，則無法通過複選框進行選項卡的設置，也不會以表單形式提交它們的值。您應該使用可見性隱藏的類。 – Simon 2013-03-15 15:59:35

風格複選框作爲切換按鈕

回答

相關問題