html - Clicking on label doesn't check radio button -
i'm trying make color picker setting html this:
<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> what i'm trying make actual radio button invisible user , make label clickable have neat list of colored squares can select 1 of. radio button doesn't seem checked.. why be?
my 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; }
new answer old question.. :) not sure it's case, i'm experimentind same exact issue when clicking labels on page there 2 duplicated forms, 1 of 2 hidden. 1 used on page area mobile devices, other desktop devices.
the 1 appearing first on html flow working properly, other no. fake example, see 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/
so now, me, trick here find way avoid form duplication.
Comments
Post a Comment