テキストをhtmlのラジオボタンとして機能させたいので、複数のオプションから1つのオプション(テキスト)をクリックすると強調表示(選択)され、値が先に進みます。
質問する
3460 次
1 に答える
2
最も簡単な方法は、非表示にするラジオ ボタンを使用することです。次に、テキストをラジオ ボタンのラベルに変換します。
各ラジオ ボタンとそのラベルをラッパーに入れて、簡単に配置できるようにします。
<div class="radiowrapper" id="wrap1">
<input type="radio" name="problem" value="headaches" id="problem1">
<label for="problem1">I get headaches</label>
</div>
<div class="radiowrapper" id="wrap2">
<input type="radio" name="problem" value="teeth" id="problem2">
<label for="problem2">I grind my teeth</label>
</div>
<div class="radiowrapper" id="wrap3">
<input type="radio" name="problem" value="heartburn" id="problem3">
<label for="problem3">I experience heart burn</label>
</div>
そしてCSS:
.radiowrapper {position:absolute;}
.radiowrapper input {visibility:hidden; width:0;}
.radiowrapper label:hover {font-weight:bold}
.radiowrapper input:checked + label {font-weight:bold; text-transform:uppercase}
#wrap1 {left:100px; top:50px;}
#wrap2 {left:80px; top:100px;}
#wrap3 {left:0px; top:150px;}
jsFiddleを参照してください。
于 2013-08-23T06:33:25.903 に答える