I need the ability to place the labels for radio buttons above the selections, and not to the left or the right. Is there a way to use CSS that would give this effect?
THanks!
I think I know what you are looking for, but correct me if I'm missing the mark. I'm assuming you will want the radio buttons centered under their labels. This is a lot easier if you are okay with adding <br>s to your markup.
label {
float: left;
padding: 0 1em;
text-align: center;
}
<label for="myChoice1">Choice 1<br />
<input type="radio" id="myChoice1" name="myChoice" value="1" />
</label>
<label for="myChoice2">Choice ABC<br />
<input type="radio" id="myChoice2" name="myChoice" value="ABC" />
</label>
<label for="myChoice3">Choice qwerty<br />
<input type="radio" id="myChoice3" name="myChoice" value="qwerty" />
</label>
<label for="myChoice4">Choice--final<br />
<input type="radio" id="myChoice4" name="myChoice" value="final" />
</label>
...and then use your own clearing method to move to the next line.
(The use of the for attribute in the <label>s is a little redundant here, but it won't hurt anything.)
Instead of the following:
<label>Label <input type="radio" id="val" name="val" value="hello"></label>
You can use this and style the two separately:
<label for="val">Label</label>
<input type="radio" id="val" name="val" value="hello">
I can't be more specific without seeing exactly what layout you are going for, but if you just want to get the label above the radio button, use display:block on the radio button. (obviously, this is inline just as an example)
<label>Label <input style="display:block;" type="radio" id="val" name="val" value="hello" /></label>
So I know this isn't the answer you are looking for, but I would be confused to see that type of layout. It is not standard and it would put me off. Just my $.02.
Related
I have a set of radio buttons in the format below. I'm using a legend and a fieldset to group the radio buttons and give the set a label. I'm styling the input to be hidden, and then styling the label to look more like a button.
My Question:
If I want to add more context for one of the buttons, what is the most accessibility friendly way of doing that? I was thinking about adding a title attribute to the label of "Vote '?' if you wish to abstain". I don't mind this appearing in a tooltip, so title seems work fine, I'm just not sure how it is handled by screen readers.
<fieldset>
<legend>Votes</legend>
<label>
<input type="radio" class="hidden" value="0" /> ?
</label>
<label>
<input type="radio" class="hidden" value="1" /> 1
</label>
<label>
<input type="radio" class="hidden" value="2" /> 2
</label>
<label>
<input type="radio" class="hidden" value="3" /> 3
</label>
</fieldset>
You can Edit Like below:
<fieldset>
<legend>Votes</legend>
<label title="0">
<input name="r1" type="radio" class="hidden" value="0" /> ?
</label>
<label title="1">
<input name="r1" type="radio" class="hidden" value="1" /> 1
</label>
<label title="2">
<input name="r1" type="radio" class="hidden" value="2" /> 2
</label>
<label title="3">
<input name="r1" type="radio" class="hidden" value="3" /> 3
</label>
</fieldset>
Following a common practice, similar to how bootstrap uses its screen reader-only helper (.sr-only), you could use CSS to offset the text within the label so that it is hidden to the visual user and only visible to the screen reader.
Using the title attribute on the label you will be relying on the specific user's AT usage of the label title attribute.
<label for="ir1">
<input id="ir1" name="r1" type="radio" class="hidden" value="0" />
visual text
<span class="sr-only">additional screen reader only text</span>
</label>
https://getbootstrap.com/docs/3.3/css/#helper-classes-screen-readers
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
Some screen reader + browser combinations don't honor "implicit" labels (input fields nested in a label) because they don't associate the label with their respective (nested) input element. That's a bug on their end but is something you should try to avoid. So the first thing I would do is add the for attribute to all the <label> elements.
<fieldset>
<legend>Votes</legend>
<label for="r1">
<input name="myradio" id="r1" type="radio" class="hidden" value="0" /> ?
</label>
<label for="r2">
<input name="myradio" id="r2" type="radio" class="hidden" value="1" /> 1
</label>
<label for="r3">
<input name="myradio" id="r3" type="radio" class="hidden" value="2" /> 2
</label>
<label for="r4">
<input name="myradio" id="r4" type="radio" class="hidden" value="3" /> 3
</label>
</fieldset>
Note, your original code did not have a name attribute for each <input> so the radio buttons were not programatically grouped together. I added name="myradio" to each one. I also added an ID to each <input> and now each <label> points to each <input> via its for attribute.
One possible way to add additional text to each label is to use visually hidden text that is still available to screen readers. #jcruz mentioned that and it's one possibility. It's a pretty common technique.
Another solution, and possibly a little simpler than hidden text, is to have an aria-label attribute on each <input>. The aria-label is not visible. It's there solely for the screen reader. The aria-label will override anything in the <label>. But one caution when having both visible text and an aria-label, the aria-label must contain the same text as in the visual label, plus it can have additional text. This is a new WCAG 2.1 guideline and is called "2.5.3 Label in Name". So you can visually have "2" as the <label> but the aria-label could be "vote two times to get your candidate in office". In this case, whether you have "two" or "2" in the label doesn't matter. A speech interface user can say "click two" and the correct radio button will be selected.
(Note that with a braille device, there is a difference. One would show the word "two" and the other would show the number "2", but again, in this case it might not matter.)
<fieldset>
<legend>Votes</legend>
<label for="r1">
<input name="myradio" id="r1" type="radio" aria-label="Not sure who to vote for? Abstain" class="hidden" value="0" /> ?
</label>
<label for="r2">
<input name="myradio" id="r2" type="radio" aria-label="Vote one time to be honest" class="hidden" value="1" /> 1
</label>
<label for="r3">
<input name="myradio" id="r3" type="radio" aria-label="Vote two times to get your candidate in office" class="hidden" value="2" /> 2
</label>
<label for="r4">
<input name="myradio" id="r4" type="radio" aria-label="Vote three times if you're really passionate" class="hidden" value="3" /> 3
</label>
</fieldset>
Note that you might have a special case that I didn't test with speech recognition software. As mentioned, the aria-label needs to contain the visible text from the label. With your first radio, it's a question mark. I'm not sure if speech recognition will expect "click question mark", and if the "?" in the aria-label will match.
Basically what I'm trying to do is have a text field display with this string "Correct" appear below the radio if the correct radio has been clicked.
Here is what I have for the structure
<div id="question2">
<div class="question">A JavaScript object is wrapped by what charaters?</div>
<input type="radio" name="question2" value="a"/>
<label>[]</label>
<input type="radio" name="question2" value="b"/>
<label>;;</label>
<input type="radio" name="question2" value="c"/>
<label>{}</label>
<input type="radio" name="question2" value="d"/>
<label>()</label>
</div>
I'm hoping there is a way to do this using CSS but I haven't been able to find much for what I'm trying to accomplish.
This is kinda not very nice solution but can be usable to some certain extend :)
Hope this helps :)
input[type="radio"] + label + span {
display: none;
}
input[type="radio"]:checked + label + span {
display: block;
}
<div id="question2">
<div class="question">A JavaScript object is wrapped by what charaters?</div>
<input type="radio" name="question2" value="a" />
<label>[]</label><span><br/>Wrong answer.</span>
<br />
<input type="radio" name="question2" value="b" />
<label>;;</label><span><br/>Wrong answer.</span>
<br />
<input type="radio" name="question2" value="c" />
<label>{}</label><span><br/>Correct answer.</span>
<br />
<input type="radio" name="question2" value="d" />
<label>()</label><span><br/>Wrong answer.</span>
</div>
You can use a non adjacent sibling selector '~' to accomplish what you want if it's a pure CSS solution you're looking for. Notice I did add an id to each of your inputs to make the selectors simpler, though you could accomplish the same thing by checking value.
CSS Explained:
When the radio button ID'd q2 belonging to the parent ID'd question2 has the property 'checked' (note the pseudo selector :checked) the non-adjacent sibling matching the ID question2_status will have the content 'Correct' appended to it's :before pseudo selector. ~ is the reference to the non-adjacent sibling, meaning that it shares the same parent, but isn't directly the previous or next child of it. This is used because the container for the result is below all the options. Therefore you can apply this same logic to any of your questions regardless of the correct answer's position in the list.
#question2 #q2c:checked ~ #question2_status:before {
content: 'Correct';
}
<div id="question2">
<div class="question">A JavaScript object is wrapped by what charaters?</div>
<input type="radio" name="question2" id="q2a" value="a"/>
<label>[]</label>
<input type="radio" name="question2" id="q2b" value="b"/>
<label>;;</label>
<input type="radio" name="question2" id="q2c" value="c"/>
<label>{}</label>
<input type="radio" name="question2" id="q2d" value="d"/>
<label>()</label>
<div id='question2_status'></div>
</div>
Edit: You can do this in CSS!
You can achieve this with CSS like so:
input[value="c"]:checked ~ #feedback_box:after {
content: "correct!"
}
<div id="question2">
<div class="question">A JavaScript object is wrapped by what charaters?</div>
<input type="radio" name="question2" value="a"/>
<label>[]</label>
<input type="radio" name="question2" value="b"/>
<label>;;</label>
<input type="radio" name="question2" value="c"/>
<label>{}</label>
<input type="radio" name="question2" value="d"/>
<label>()</label>
<p id="feedback_box"></p>
</div>
I'm not sure that you can do this in CSS, but I highly doubt it has the desired capabilities to optimally perform the task. You can add a class to the correct radio button and add event listeners to all of them that trigger when clicked. When clicked, they then display a message, "correct". (note that my way of inserting the message is not optimal, you can use your own way).
Array.prototype.forEach.call(document.getElementsByClassName("correct"), function(element, index) {
element.addEventListener('click', function(event) {
element.parentElement.innerHTML += "<br>correct";
});
});
<div id="question2">
<div class="question">A JavaScript object is wrapped by what charaters?</div>
<input type="radio" name="question2" value="a"/>
<label>[]</label>
<input type="radio" name="question2" value="b"/>
<label>;;</label>
<input type="radio" name="question2" class="correct" value="c"/>
<label>{}</label>
<input type="radio" name="question2" value="d"/>
<label>()</label>
</div>
The code above does a forEach loop over all the elements that have the class name correct (notice I added that on a radio button) and then adds a listener to them. Once a user clicks on them, it appends "<br>correct" to the parent's innerHTML (not optimal).
i think you can accomplish your goal using javascript.
use the onclick attribute for each radio button. then write two javascript functions (correct and wrong). use a div element for display the output of those javascript functions. here
note that there are two image files in the root directory named correct.jpg and wrong.jpg to display the right mark or wrong mark. you can use a text instead of images. hope this helps. thanks!
<html>
<head>
<script type="text/javascript">
function correct()
{
document.getElementById("displayer").innerHTML="<img src='correct.jpg'/> ";
}
function wrong()
{
document.getElementById("displayer").innerHTML="<img src='wrong.jpg'/> ";
}
</script>
</head>
<body>
<div id="question2">
<div class="question">A JavaScript object is wrapped by what charaters?</div> <br/>
1) <input type="radio" onclick="wrong();" id="btn1" name="question2" value="a"/>
<label> [ ]</label> <br/>
2) <input type="radio" onclick="wrong();" id="btn2" name="question2" value="b"/>
<label> ; ;</label> <br/>
3) <input type="radio" onclick="correct();" id="btn3" name="question2" value="c"/>
<label> { }</label> <br/>
4) <input type="radio" onclick="wrong();" id="btn4" name="question2" value="d"/>
<label> ( )</label> <br/>
</div>
<div id="displayer">
</div>
</body>
</html>
I am trying to put a bunch of radio buttons in a form. Each has a label, and all the way to the right of the label should be an X (hence the class:pull-right). For some reason, each time I add a new radio button, the X gets pulled more and more towards the center of the form. Here is the code; see link below for what it produces. Can someone please explain what is happening/how I can fix the alignments? Note: each successive X is shifting by an additional 8px, which happens to be the border-radius of the form; not sure if this is just a coincidence.
Edit: what I have tried: putting each set of input/label/p tags in its own row, and also span; neither worked. I have tried playing with the pull-right class but when I remove it, the X's actually get sent to the next line below.
<form style="border:2px black solid; border-radius: 8px; padding:5px;">
<input style="margin-left:5px;line-height:30px" id="labelA" type="radio" name="letter" value="A" checked="true"></input>
<label for="labelA" style="font weight:normal">A</label>
<p class="pull-right" style="margin-right:5px;line-height:25px;">X</p>
<br>
<input style="margin-left:5px;line-height:30px" id="labelB" type="radio" name="letter" value="B" checked="true"></input>
<label for="labelB" style="font weight:normal">B</label>
<p class="pull-right" style="margin-right:5px;line-height:25px;">X</p>
<br>`
<input style="margin-left:5px;line-height:30px" id="labelC" type="radio" name="letter" value="C" checked="true"></input>
<label for="labelC" style="font weight:normal">C</label>
<p class="pull-right" style="margin-right:5px;line-height:25px;">X</p>
</form>
Output: http://imgur.com/zADCGRY
Removed the styles just to show what I did in a simple manner.
Generally I would not recommend using pull-right/left as it's effects will occur down the ENTIRE HTML until you call something like div class="clear" />.
Just use float if possible.
JSFiddle Demo
HTML
<form style="border:2px black solid; border-radius: 8px;">
<input id="labelA" type="radio" name="letter" value="A" checked="true" />
<span>A</span>
<span class="x">X</span>
<br>
<input id="labelB" type="radio" name="letter" value="B" checked="true" />
<span>B</span>
<span class="x">X</span>
<br>
<input id="labelC" type="radio" name="letter" value="C" checked="true" />
<span >C</span>
<span class="x">X</span>
</form>
CSS
.x {
float:right
}
Some further advice, one thing I have learned is if I am having issues styling stuff and I am jamming styles on individual elements, I am most likely thinking wayyy to hard on it. Try to keep CSS simple. :)
This is the code in my html file, I use CSS to make it look like an application form. I had to erase some of the tags so it would display all of the html code I typed in here.
<label>Member</label>
<input type="radio" name="Answer" value="Yes"/>Yes<br/>
<input type="radio" name="Answer" value="No"/>No<br/>
<label>MemberID:</label> input type="text" name="MemberID" size="30" /><br/>
<label>Password:</label> input type="text" name="Password" size="25"/><br/>
I want the labels 'MemberID' and 'Password' and their corresponding "text"-inputs to be hidden when the radio button 'no' is enabled. Does anyone know what solutions there are for this problem? It would be of great help!
You would have to change the order of the input and label
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" />
<label for="radio-choice-1">Choice 1</label>
Then your css would be
input[type="radio"]:checked+label {....}
Check out this question:
CSS selector for a checked radio button's label
input[type="radio"]:checked+label{ /*styles*/ }
why can't one set a style like the font size in an input tag, e.g.
<input style="font-size:20px" type="radio" name="a" value="a">some text</input>
Shouldn't the font attributes apply?
Secondly, what is the best way to do this then?
Thanks
I think that it's because the CSS you're setting applies to the 'inner' tag of that input.
The thing you want styled is its Value, so you need to wrap your input inside a placeholder and style that.
For example:
<span style="font-size:40px">
<input type="radio" name="a" value="a">some text
<input type="radio" name="a" value="b">some text
</span>
Works as expected.
There's not a lot you can do to style a radio button, however:
<input type="radio" name="radiogroup" id="radio-1">
<label for="radio-1">Radio button 1</label>
you can style the label...
The best way to go about this is providing the style deceleration within an external stylesheet, or perhaps at the top of the document. Inline styles are typically what you want to avoid if at all possible, as it becomes confusing for later changes and can cause really dirty specificity issues.
An example of a fix:
HTMl (example)
<div id="form">
<input type="text" name="name" value="a" />
</div>
CSS (example)
#form input {
font-size: 20px;
}
Hope this helps.
Try the following:
<input type="radio" name="a" value="a"><span style="font-size: 50px;">some text</span></input>
If you wrap the text with a span\p tag you will be able to style the inner text of that tag.
I know this question already has an accepted answer, but I figure it's worth mentioning this:
It may be better to either associate a <label> tag with each radio input (using the for attribute of the label) or wrapping each radio input with a label tag. This lets your user click on the text to select the radio input instead of having to aim for a rather small circle.
So your markup looks like so:
<input type="radio" id="radio1" name="radios" value="something 1" />
<label for="radio1">Something 1</label>
<input type="radio" id="radio2" name="radios" value="something 2" />
<label for="radio2">Something 2</label>
<input type="radio" id="radio3" name="radios" value="something 3" />
<label for="radio3">Something 3</label>
Radio inputs are grouped into mutually exclusive selections by their name, which the group will share. The value specified in the for attribute of the label will match the id attribute of the radio input you want selected. So in the sample above, if you click on the text "Something 1", the radio input that is id'd as radio1 gets selected.
You can then style the text of the label to your heart's content.
This is in regards to the second part of your question,
"Secondly, what is the best way to do this then?"
#input {
background-color: black;
color: green;
text-align: center;
}
<input id="input" value="Value" />