やりたいこと
・最初から星評価を黄色(5星)のしたい
試したこと
必須項目になっているので、色を入れ替えるだけでは送信できなかった
各inputにformnovalidateを入れたがダメだった
お力貸してください、、
よろしくお願い致します
Contact Form 7 の記述
[radio star id:star use_label_element "★★★★★" "★★★★" "★★★" "★★" "★"]
出力された HTML
<span class="wpcf7-form-control-wrap star"> <span class="wpcf7-form-control wpcf7-radio id="star"> <span class="wpcf7-list-item first"> <label> <input type="radio" name="star" value="★★★★★" /> <span class="wpcf7-list-item-label">★★★★★</span> </label> </span> <span class="wpcf7-list-item"> <label> <input type="radio" name="star" value="★★★★" /> <span class="wpcf7-list-item-label">★★★★</span> </label> </span> <span class="wpcf7-list-item"> <label> <input type="radio" name="star" value="★★★" /> <span class="wpcf7-list-item-label">★★★</span> </label> </span> <span class="wpcf7-list-item"> <label> <input type="radio" name="star" value="★★" /> <span class="wpcf7-list-item-label">★★</span> </label> </span> <span class="wpcf7-list-item last"> <label> <input type="radio" name="star" value="★" /> <span class="wpcf7-list-item-label">★</span> </label> </span> </span> </span>
CSS
#star { position: relative; } #star .wpcf7-list-item { position: absolute; top: 0; left: 0; } #star input[type='radio'] { position: absolute; opacity: 0; } #star .wpcf7-list-item-label { color: #ccc; font-size: 180%; letter-spacing: .5em; cursor: pointer; } #star .wpcf7-list-item:hover .wpcf7-list-item-label, #star .wpcf7-list-item:hover ~ .wpcf7-list-item .wpcf7-list-item-label, #star .wpcf7-list-item.checked .wpcf7-list-item-label, #star .wpcf7-list-item.checked ~ .wpcf7-list-item .wpcf7-list-item-label { color: #fc0; }
JavaScript
<script> jQuery(function($) { $('#star input:radio').change(function(){ $('#star .wpcf7-list-item').removeClass('checked'); if ( $(this).prop('checked') ){ $(this).closest('.wpcf7-list-item').addClass('checked'); } }); }); </script>

バッドをするには、ログインかつ
こちらの条件を満たす必要があります。