I built a custom radio button using this structure. However using this configuration I cant click the text to toggle the radio, any ideas why this is not working?
<div class="form-group">
<label class="custom-control custom-radio">
<input id="pefrormanceRadio" name="bonusRangeRadio" type="radio" class="custom-control-input" value="pefrormanceRadio">
<span class="custom-control-indicator"></span>
</label>
<span class="custom-control-description">test</span>
</div>
You can achieve this by moving your text inside the label element.
Clicking a label will also click its associated form input. You can either associate a label and a form input with the 'for' HTML attribute (as per zmuci's answer) or by wrapping your input with the label element (which you are already doing).
In your case you were trying to click some text that was outside the label (hence not associated in any way with the input).
<div class="form-group">
<label class="custom-control custom-radio">
<input id="pefrormanceRadio" name="bonusRangeRadio" type="radio" class="custom-control-input" value="pefrormanceRadio">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">test</span>
</label>
</div>
You need to "connect" the text and input, you do that with for attribute added to label tag.
So your HTML should look something like this:
<div class="form-group">
<input id="pefrormanceRadio" name="bonusRangeRadio" type="radio" class="custom-control-input" value="pefrormanceRadio">
<label class="custom-control custom-radio" for="pefrormanceRadio">Test</label>
<span class="custom-control-indicator"></span>
</div>
Or if you can't change the HTML, Den Biswajit answer is the correct one. But you should be aware that from the semantic/accessible point of view, input should have a meaningful label.
Please add custom-control-description inside label and update css
<div class="form-group">
<label class="custom-control custom-radio">
<input id="pefrormanceRadio" name="bonusRangeRadio" type="radio" class="custom-control-input" value="pefrormanceRadio">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">test</span>
</label>
</div>
you can do this using jquery
$("label").click(function(){
$("#pefrormanceRadio").attr('checked', 'checked');
});
Related
I am trying to create a satisfaction survey using the radio buttons, but not sure if my syntax are correct. This is what I did:
From what I understand, the one I am reading says each radio button should have a label, but in this case, there is no label for each radio button, because I want to align them under "Poor," "Good," "Better," and "Super."
This is how I did one of them:
<div class="radio_menu">
<p>Menu selection</p>
<input type="radio" id="menu_selection_poor" name="menu_selection" value="poor">
<input type="radio" id="menu_selection_good" name="menu_selection" value="good">
<input type="radio" id="menu_selection_better" name="menu_selection" value="better">
<input type="radio" id="menu_selection_super" name="menu_selection" value="super">
</div>
Is this correct?
The radio buttons do need labels to be accessible. However, they don't need to be visible if the form makes sense to sighted users without them. You can use <span> elements with a "screen-reader only" class within the <label> elements to visually hide text meant for screen readers and other assistive technologies.
Also, consider using <fieldset> and <legend> elements to group form fields.
This could look like:
<fieldset class="radio_menu">
<legend>Menu selection</legend>
<label>
<input type="radio" id="menu_selection_poor" name="menu_selection" value="poor">
<span class="sr-only">Poor</span>
</label>
<label>
<input type="radio" id="menu_selection_good" name="menu_selection" value="good">
<span class="sr-only">Good</span>
</label>
<label>
<input type="radio" id="menu_selection_better" name="menu_selection" value="better">
<span class="sr-only">Better</span>
</label>
<label>
<input type="radio" id="menu_selection_super" name="menu_selection" value="super">
<span class="sr-only">Super</span>
</label>
</fieldset>
I have the following html code, which contains input radio and label for it, when I turn windows narration (voiceover) on, it highlights only radio button:
But, I want input + label to be highlighted together:
is there any way to achieve this?
Here's my code:
<div>
<input type="radio" id="radio1" name="radio1" checked>
<label for="radio1">
Field label
</label>
</div>
I overcame the issue by changing markup a bit. I added wrapper div:
<div class="radio-wrapper">
<input type="radio" id="radio1" name="radio1" checked>
<label for="radio1">
Field label
</label>
</div>
And made radio button width & height 100% and display: inline-block;
Now it's acting as it should.
I have some custom radio buttons. The final option should be a radio button with an input field.
As you can see, in de Codepen example, the radio button does not align vertically center with the input field.
I have tried everything from calculating top, to display flex.
Codepen: https://codepen.io/monsmado/pen/RwarYEG
<form>
<label>Do you have an elevator?</label>
<div class="custom-control custom-radio">
<input type="radio" id="elevatorYes" name="elevator" class="custom-control-input">
<label class="custom-control-label" for="elevatorYes">Yes</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="elevatorNo" name="elevator" class="custom-control-input">
<label class="custom-control-label" for="elevatorNo">No</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="elevatorOther" name="elevator" class="custom-control-input">
<label class="custom-control-label" for="elevatorOther">
<input type="text" class="form-control" name="elevator" placeholder="Other">
</label>
</div>
</form>
Add this CSS in this case
.form-group:nth-child(4) .custom-control-label:after, .form-group:nth-child(4) .custom- control-label:before{
margin-top: 0.5em
}
I send you the solution in you codepen
https://codepen.io/r0binxp/pen/qBZbJaZ
Well, a quick fix for your situation could be overriding the current top value of the custom radio button and set it to 25% (Since the actual height of it is 50% of your input so the 25% will fit it exactly in middle). Also, note that display flex on the parent element won't work as expected because the customized radio exits within the ::before pseudo-element so it won't get the flex attribute.
.custom-control-label[for=monthsOther]::before,
.custom-control-label[for=monthsOther]::after {
top: 25%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<form>
<label>How many months?</label>
<div class="custom-control custom-radio">
<input type="radio" id="monthsYes" name="months" class="custom-control-input">
<label class="custom-control-label" for="monthsYes">1-2</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="monthsNo" name="months" class="custom-control-input">
<label class="custom-control-label" for="monthsNo">3-5</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="monthsOther" name="months" class="custom-control-input">
<label class="custom-control-label" for="monthsOther">
<input type="text" class="form-control" name="months" placeholder="Other">
</label>
</div>
</form>
NOTE: Keep in mind since the radio button itself and its background on check action is defined in ::before and ::after pseudo-elements you need to override both of them.
This seems like a really hacky way to change the appearance of form elements. The original question is missing any CSS code (which is where all the problems arise) but the linked codepen does show the root causes. It will be very difficult to properly align elements that are absolutely positioned, especially when you start taking left-to-right or larger font sizes into account. Additionally, creating the visual representation of a radio button using a ::before on inside the label is a recipe for frustration and ultimately a bad solution.
The proper solution is probably using vertical-align: middle or vertical-align: baseline on both the radio and the label. but those will have no effect while the elements are absolutely positioned.
I'm attempting to add a label to the top of these stacked radios. This method works, but I'm returning a warning when I run this through validator.w3.org
The warning states "The for attribute of the label element must refer to a non-hidden form control." This error is popping up because I have the id field in the incorrect location, but I'm unsure as to where it is supposed to be located. I've tried several solutions, but all have returned the same attribute warning.
<div class="col">
<div class="custom-controls-stacked">
<label for="gender"> Gender </label>
<label class="custom-control custom-radio" id="gender">
<input id="radioStacked3" name="radio-stacked" type="radio" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description"> Male </span>
</label>
<label class="custom-control custom-radio">
<input id="radioStacked4" name="radio-stacked" type="radio" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description"> Female </span>
</label>
</div>
</div>
You have a <label> for a <label> which is a bit weird. The <label> is for a form element only.
I would remove the "Gender" label, wrap the whole thing in a <fieldset> and put "Gender" into a <legend>.
I'm trying to give label after button,but the button is not appearing.
Is is working in fiddle but not in my local code.
Please solve the issue.
<div style="float:left;padding-top:5px;">
<span class="newrdb">
<label for="all" style="padding-left:15px;padding-bottom:8px;width:100px;font-size:12px;float:left">
Default Template
<input type="radio" name="Template" id="all" value="Default Template" checked="">
</label>
</span>
</div>
Simple solution.. Remove the width:100px;from the label or give it more pixels...
The problem is, that both elements (the text and the radio button) don't fit together inside a 100px element.. So by deleting it or making it wider, they will fit together.
<div style="float:left;padding-top:5px;">
<span class="newrdb">
<label for="all" style="padding-left:15px;padding-bottom:8px;font-size:12px;float:left">
Default Template
<input type="radio" name="Template" id="all" value="Default Template" checked="">
</label>
</span>
</div>
Keep input field outside of the label tag,
Try following code,
<div style="float:left;padding-top:5px;">
<span class="newrdb">
<label for="all" style="padding-left:15px;padding-bottom:8px;font-size:12px;float:left;">
Default Template
</label>
<input type="radio" name="Template" id="all" value="Default Template" checked="">
</span>
</div>