I am new to coding generally, and have been working on a quiz program on HTML and CSS (data is from PostgreSQL, framework SpringBoot on Eclipse. PHP and JQuery not included in syllabus).
Here's my problem:
- Now I have a list of answers where the user will have to select from.
- Was hoping to have the colours of the button-like radio input? change colour when the user clicks on it.
- Managed to create the buttons and the cursor when it hovers over the selections, but there's no change despite my CSS.
Can someone tell me where I did wrong? Big thanks in advance.
※Updated HTML and CSS according to the advices in the comments more code:
This is the HTML code:
the screenshot of the id: https://i.stack.imgur.com/4IeWK.png
<body>
<form method="post" action="/result" data-th-object="${form}">
<!-- ヘッダータイトル -->
<div >
<h6>模擬試験オンライン</h6>
</div>
<br>
<!-- 試験指示 -->
<div >
<p>表示された言葉の英単語を以下から選び、</p>
<p>OKボタンをクリックしてください。</p>
</div>
<br>
<!-- question -->
<div data-th-each="list, st : ${form.list}">
<p style="text-align: center; font-size: 12px;">
<span data-th-text="${list.questionCount}">n</span> <span>/</span> <span
data-th-text="${list.questionTotal}">/n</span>
</p>
<div >
<p style="font-size: 22px; font-weight: bold"
data-th-text="${list.content}">question</p>
</div>
<!-- answer choice -->
<fieldset style="border: 0">
<div
data-th-each="choice, stat : ${list.choice}">
<input id="selectedchoice" data-th-name="|choice${st.count}|"
type="radio" data-th-value="${choice}"
/>
<label
for="selectedchoice"><span data-th-text="${choice}"></span></label>
</div>
</fieldset>
</div>
<!-- 解答完了ボタン -->
<div >
<input style="font-size: 25px"
type="submit" onclick=validate() value="OK!">
</div>
</form>
</body>
CSS:
input[type=radio] {
display: none;
}
input[type="radio"]:checked label {
background: #455a64;
color: #eceff1;
}
label {
display: block;
margin: auto;
width: max-content;
text-align: center;
padding-top : 0.05em;
padding-bottom: 0.05em;
padding-left: 5em;
padding-right: 5em;
line-height: 45px;
cursor: pointer;
border: solid #eceff1;
background-color: #eceff1;
padding-top: 0.05em;
}
CodePudding user response：
UPDATE: Added live test at the end
Unlike class, each id property must be unique in the whole document.
Matching id and for also need to be assigned for each pair of input and label to make the styles work.
The input[type="radio"]:checked label selector is not targeting the label properly.
This is because it uses adjacent sibling selector , but input and label are not adjacent due to a <br> in between.
To solve this, you could use a general sibling combinator ~ to target the label:
input[type="radio"]:checked ~ label {
background: #455a64;
color: #eceff1;
}
OR remove the <br> in between the input and label, and keep the original CSS:
<div data-th-each="choice, stat : ${list.choice}">
<input
id="selectedchoice"
name="choice"
type="radio"
data-th-value="*{list[__${st.index}__].choice}"
/>
<label for="selectedchoice"><span data-th-text="${choice}"></span></label>
</div>
Both ways should make label change color when :checked.
Hope this will help!
LIVE TEST (run with button below)
input[type="radio"] {
display: none;
}
input[type="radio"]:checked ~ label {
background: #455a64;
color: #eceff1;
}
label {
display: block;
margin: auto;
width: max-content;
text-align: center;
padding-top: 0.05em;
padding-bottom: 0.05em;
padding-left: 5em;
padding-right: 5em;
line-height: 45px;
cursor: pointer;
border: solid #eceff1;
background-color: #eceff1;
padding-top: 0.05em;
}<fieldset style="border: 0">
<div data-th-each="choice, stat : ${list.choice}">
<input
id="selectedchoice1"
name="choice"
type="radio"
data-th-value="*{list[__${st.index}__].choice}"
/><br />
<label for="selectedchoice1">selectedchoice1</label>
</div>
<div data-th-each="choice, stat : ${list.choice}">
<input
id="selectedchoice2"
name="choice"
type="radio"
data-th-value="*{list[__${st.index}__].choice}"
/><br />
<label for="selectedchoice2">selectedchoice2</label>
</div>
<div data-th-each="choice, stat : ${list.choice}">
<input
id="selectedchoice3"
name="choice"
type="radio"
data-th-value="*{list[__${st.index}__].choice}"
/><br />
<label for="selectedchoice3">selectedchoice3</label>
</div>
</fieldset>CodePudding user response：
Paste the following code into this W3Schools "Try it" runner page.
Delete all the code that appears on the left hand side first, then paste.
I double the input element so that the effect can be seen in this code. Once you are satisfied with the styling, just delete the extra dummy radio button. You will notice that I included @John Li's CSS, and changed you width: max-content; to width: auto; (just playing around).
<!DOCTYPE html>
<html>
<header>
<style>
input[type=radio] {
display: none;
}
input[type="radio"]:checked ~ label {
background: #455a64;
color: #eceff1;
}
label {
display: block;
margin: auto;
max-width: 80px;
width: auto;
text-align: center;
padding-top : 0.05em;
padding-bottom: 0.05em;
padding-left: 5em;
padding-right: 5em;
line-height: 45px;
cursor: pointer;
border: solid #eceff1;
background-color: #eceff1;
padding-top: 0.05em;
}
</style>
</header>
<body>
<h1>Display Radio Buttons</h1>
<form action="">
<div>
<input
id="selectedchoice1"
name="choice"
type="radio"
data-th-value="*{list[__${st.index}__].choice}"
/>
<label for="selectedchoice1"><span data-th-text="${choice}">meow</span></label>
<p/> <!-- this seems to prevent bleeding of the color from top down.
Neither br or div work. -->
<input
id="selectedchoice2"
name="choice"
type="radio"
data-th-value="*{list[__${st.index}__].choice}"
/>
<label for="selectedchoice2"><span>bark</span></label>
</div>
</form>
</body>
</html>