実現したいこと
Apps Scriptでhtmlのページを作成しているのですが、
ラジオボタンを作成してクリックしてもラジオボタンの選んだところのチェックが入らないです。
今は5m以下のところを選択している状態です。
丸の部分にクリックしているのに入っていないです。
htmlは下記の内容です。
<!-- 選択肢のラジオボタン + ラベル --> <template v-for="(choise, i) in activeQuestion.choises"> <ul> <li> <input type="radio" :id="`choise${i}`" :value="i" v-model="userAnswer" :disabled="showAnswer" @click="onRadioButtonClick" > <label v-if="choise.text" :for="`choise${i}`" style="display: block" > {{ choise.text }} <div class="check"></div> </li> </ul> </template>
下記がラジオボタンのCSSになります。
/* ラジオボタン */ .container{ display: block; position: relative; margin: 5px auto; width: 90%; padding: 20px; } h2 { color: #303030; } .container ul{ list-style: none; margin: 0; padding: 0; overflow: auto; } ul li{ color: #303030; display: block; position: relative; float: left; width: 100%; height: 70px; border-bottom: 1px solid #333; } ul li input[type=radio]{ position: absolute; visibility: hidden; } ul li label{ display: block; position: relative; font-weight: 300; font-size: 1em; padding: 17px 13px 13px 80px; margin: 7px auto; height: 30px; z-index: 9; cursor: pointer; -webkit-transition: all 0.25s linear; } ul li:hover label{ color: #E9F1FE; } ul li .check{ display: block; position: absolute; border: 5px solid #303030; border-radius: 100%; height: 20px; width: 20px; top: 15px; left: 20px; z-index: 5; transition: border 0.25s linear; -webkit-transition: border 0.25s linear; } ul li:hover .check { border: 5px solid #0DFF92; } ul li .check::before { display: block; position: absolute; content: ''; border-radius: 100%; height: 15px; width: 15px; top: 5px; left: 5px; margin: auto; transition: background 0.25s linear; -webkit-transition: background 0.25s linear; } input[type=radio]:checked ~ .check { border: 5px solid #0DFF92; } input[type=radio]:checked ~ .check::before{ background: #0DFF92; } input[type=radio]:checked ~ label{ color: #0DFF92; }
原因・回避策がお分かりの方教えていただきたいです。
回答1件
あなたの回答
tips
プレビュー