Among a set of 7 radio buttons, I am looking to highlight the one in the center (id=q1val6) with a short vertical line running behind it to signify the zero point on a likert scale.
<form name="form1" action="#" onsubmit="jsPsych.finishTrial()" method="post">
<div class="likertline0">
<input class="radio" style="display:inline" type="radio" id="q1val3" name="q1" value="-3"/>
<input class="radio" style="display:inline" type="radio" id="q1val4" name="q1" value="-2"/>
<input class="radio" style="display:inline" type="radio" id="q1val5" name="q1" value="-1"/>
<input class="radio" style="display:inline" type="radio" checked id="q1val6" name="q1" value="0"/>
<input class="radio" style="display:inline" type="radio" id="q1val7" name="q1" value="1"/>
<input class="radio" style="display:inline" type="radio" id="q1val8" name="q1" value="2"/>
<input class="radio" style="display:inline" type="radio" id="q1val9" name="q1" value="3"/>
</form>
CSS:
.likertline0:before {
content: '';
position: relative;
top: 16px;
display: block;
z-index: -1;
left: 4%;
background-color: gray;
height: 4px;
align-items: center;
width: 93%;
}
.radio {
display: none;
width: 20px;
margin: 0 10px 0 10px;
/* this is a green */
}
.radio input[type='radio'] {
display: none;
}
.radio label {
color: #666;
font-weight: normal;
}
.radiolabel:before {
content: " ";
display: inline-block;
position: relative;
top: 5px;
margin: 0 5px 0 0;
width: 20px;
height: 20px;
border-radius: 11px;
border: 2px solid #004c97;
background-color: transparent;
}
.radio input[type=radio]:checked+label:after {
border-radius: 11px;
width: 12px;
height: 12px;
position: absolute;
top: 9px;
left: 10px;
content: " ";
display: block;
background: #004c97;
}
I'm exploring a method involving a colored div as a background element, but it doesn't appear to work due to the presence of the ::before pseudo-element designed for the line behind the buttons. I would prefer a straightforward solution that avoids hiding the buttons and substituting them with images, but if that's the only viable option, please advise.
EDIT: Upon reflection, I have realized that the CSS section contains irrelevant information. The correct CSS should be limited to the following:
.likertline0:before {
content: '';
position: relative;
top: 16px;
display: block;
z-index: -1;
left: 4%;
background-color: gray;
height: 4px;
align-items: center;
width: 93%;
}
.radio {
display: none;
width: 20px;
margin: 0 10px 0 10px;
/* this is a green */
}