6

次のようにhtmlを設定して、カラーピッカーを作成しようとしています:

<ol class="kleurenkiezer list-reset clearfix">
    <li>
        <input type="radio" id="kleur_wit" name="kleurenkiezer" value="wit">
        <label for="kleur_wit" style="background: white;"></label>
    </li>
    <li>
        <input type="radio" id="kleur_creme" name="kleurenkiezer" value="creme">
        <label for="kleur_creme" style="background: #fffceb;"></label>
    </li>
    <li>
        <input type="radio" id="kleur_lichtbruin" name="kleurenkiezer" value="lichtbruin">
        <label for="kleur_lichtbruin" style="background: #968272;"></label>
    </li>
    <li>
        <input type="radio" id="kleur_bordeauxrood" name="kleurenkiezer" value="bordeauxrood">
        <label for="kleur_bordeauxrood" style="background: #941514;"></label>
    </li>
    <li>
        <input type="radio" id="kleur_oudgroen" name="kleurenkiezer" value="oudgroen">
        <label for="kleur_oudgroen" style="background: #7fa298;"></label>
    </li>
    <li>
        <input type="radio" id="kleur_lichtblauw" name="kleurenkiezer" value="lichtblauw">
        <label for="kleur_lichtblauw" style="background: #487eae;"></label>
    </li>
    <li>
        <input type="radio" id="kleur_oudgeel" name="kleurenkiezer" value="oudgeel">
        <label for="kleur_oudgeel" style="background: #b79130;"></label>
    </li>
    <li>
        <input type="radio" id="kleur_zwart" name="kleurenkiezer" value="zwart">
        <label for="kleur_zwart" style="background: #000;"></label>
    </li>
</ol>

私がやろうとしているのは、実際のラジオ ボタンをユーザーに見えないようにし、ラベルをクリックできるようにして、いずれかを選択できる色付きの正方形のきちんとしたリストを作成することです。今、私のラジオボタンがチェックされていないようです..なぜでしょうか?

私のCSS：

.kleurenkiezer {
        width: 165px;
        margin-left: -10px;
        float: right;
    }

.kleurenkiezer li {
    position: relative;

    width: 45px;
    height: 45px;
    margin: 0 0 10px 10px;
    border: 1px solid #bbbbbb;

    float: left;
}

.kleurenkiezer li input {
    position: absolute;
    top: 10px;
    left: 10px;

    z-index: 1000;
}

.kleurenkiezer li label {
    position: absolute;
    top: 0;
    left: 0;

    width: 43px;
    height: 43px;
}
4

5 に答える 5

4

本当に古い質問に対する新しい回答.. :)それがあなたのケースかどうかはわかりませんが、2つの重複したフォームがあり、2つのうちの1つが常に非表示になっているページのラベルをクリックすると、まったく同じ問題が発生します。1 つはモバイル デバイス用のページ領域で使用され、もう 1 つはデスクトップ デバイス用です。

html フローで最初に表示されるものは正常に動作していますが、もう 1 つは正しく動作していません。偽の例、js fiddle を参照してください。

<input type="radio" id="value-1" name="sort"/>
<label for="value-1">value 1</label>
<input type="radio" id="value-2" name="sort"/>
<label for="value-2">value 2</label>


<input type="radio" id="value-1" name="sort"/>
<label for="value-1">value 1</label>
<input type="radio" id="value-2" name="sort"/>
<label for="value-2">value 2</label>

https://jsfiddle.net/stratboy/8ua16gm3/1/

今のところ、私にとっての秘訣は、フォームの重複を避ける方法を見つけることです。

于 2016-03-08T11:06:52.320 に答える