10

私のウェブサイトでは、ユーザーは記事を投稿し、事前に設定されたタグを使用してそれに応じてタグを付けることができます. これらのタグは、チェックボックスの形式になっています。以下の例:

<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] 幽霊

[ ] モンスター

私がやりたいのは、チェックボックスをその中に値を持つ1つの大きなボタンにすることです。そして、「トグル」効果を持たせます。

[ エイリアン ] [ ゴースト ] [ モンスター ]

どうすればこれを行うことができますか？

4

5 に答える 5

9

Check this out

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

Note that the last selector may not work in older IE.

于 2013-03-15T15:56:35.747 に答える
7

これは、チェックボックスとラベル、隣接する兄弟セレクター、および 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。また、古い IE では、チェックボックスが次のように設定されdisplay:noneていると、フォームが送信されたときにチェックボックスが転送されないという問題があります (ただし、画面の絶対位置を非表示にする他の方法で解決できます)。

純粋な HTML/CSS ソリューションに固執しない場合 – 同じ効果を達成するのに役立つ多くのスクリプト / {js-framework-of-your-choice}-プラグインがあります。

于 2013-03-15T15:52:34.803 に答える
3

Checkboxes、radioボタン、およびSELECT要素のスタイル設定機能は非常に限られており、ブラウザーによって大きく異なります。

スタイル付きのリンクまたはボタンを使用してこれらを実現し、次に JavaScript を使用して実際のオン/オフの外観とフォームの値を設定する方がよいでしょう。

于 2013-03-15T15:45:40.580 に答える
1

このページからアイデアを借りることができます! テキストとチェックボックスをバインドしてみてください。次に、jquery を使用して、チェックボックスに関連付けられたラベルを「切り替え」ます。

次に、スタイルと画像を使用して、ラベルをチェックボックスのコンテナーのように見せることができます。それが私がすることです。

于 2013-03-15T15:49:57.167 に答える
0

属性onclickを変更する JavaScript イベントを含む写真を作成しようとする場合があります。img source次に、指定された隠しコントロールをid同じonclickイベントで使用しますdocument.getElementById('hiddencontrol').value = 1 - document.getElementById('hiddencontrol').value(デフォルトは 0 または 1)。

ただし、Javascriptなしで作成する方法がわかりません。

于 2013-03-15T15:49:02.590 に答える