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.
Related
I'm using only HTML and CSS without JavaScript. Initially the code should only show first radio button with it label, if user clicks on it, the second radio button and second label should appear and the first should disappear etc. I have no idea how to achieve this result. I suppose that the problem is in the location of tags. I don't know how to write css styles to do this task. Could you tell me how to solve this problem? The code:
<div>
<label for="radio-1" class="label-1"> <input type="radio" id="radio-1" name="group"> </label>
<label for="radio-2" class="label-2"> <input type="radio" id="radio-2" name="group"> </label>
<label for="radio-3" class="label-3"> <input type="radio" id="radio-3" name="group"> </label>
</div>
My idea is to hide all inputs and labels except ones right after a checked input (use of sibling selector +). To make it work I've added a hidden checked radio before all others.
Based on the question it is not clear what should happen if the last input is checked.
input,
label {
display: none;
}
input:checked + label + input,
input:checked + label + input + label {
display: inline;
}
<div>
<input type="radio" name="group" checked hidden><label hidden></label>
<input type="radio" id="radio-1" name="group"><label for="radio-1" class="label-1">Label 1</label>
<input type="radio" id="radio-2" name="group"><label for="radio-2" class="label-2">Label 2</label>
<input type="radio" id="radio-3" name="group"><label for="radio-3" class="label-3">Label 3</label>
</div>
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 having some trouble with the <input> HTML tag. I try to make one box checked but it isn't working. The HTML file is running with PHP. As you can see I used the default checked in the input. But it isn't working. How can I fix this without jQuery?
<fieldset id="imageselector">
<label id="labelog" class="container imageinput" style="display:none;">
<input id="Radioog" name="radio" class="radio" type="radio" value="img" checked/>
<img id="selector_image" class="selector_image" src="//youtube.com/yts/img/yt_1200-vflhSIVnY.png">
<span class="imagecheckmark"></span>
</label>
<label id="labelimg" class="container imageinput" style="display:none;">
<input id="Radioimg" name="radio" class="radio" type="radio" value="og"/>
<img id="selector_og" class="selector_image" src="//youtube.com/yts/img/yt_1200-vflhSIVnY.png">
<span class="imagecheckmark"></span>
</label>
</fieldset>
You have display: none on your label, this element is wrapping your radio inputs so none of that will show up. If you remove that, checked is working fine.
Is there a right way to stack radio buttons in Bulma?
Their example places each button on the same line:
<div class="control">
<label class="radio">
<input type="radio" name="foobar">
Foo
</label>
<label class="radio">
<input type="radio" name="foobar" checked>
Bar
</label>
</div>
I'm hoping to get something like this:
Would it be as straight forward as adding <br> tags, or does Bulma have a different better way for maintaining responsiveness?
A <br> tag between labels will work just fine.
While <br> works fine, it does not allow you to configure space between radio options flexible. For example, I can see a space between options in your example image.
In order to achieve that, I've added the following class to my SCSS:
.radio-list {
.radio {
display: block;
& + .radio {
margin-left: 0;
margin-top: .5em;
}
}
}
And now just add radio-list class to your control like this:
<div class="control radio-list">
<label class="radio">
<input type="radio" name="foobar">
Foo
</label>
<label class="radio">
<input type="radio" name="foobar" checked>
Bar
</label>
</div>
Now it looks like this:
I use the framework Boostrap and I would like to control the radio buttons alignement.
All the examples I saw to display a responsive list of radio buttons do not manage the alignment. Either they were using labels with same size or a fixed width that keep the alignment but nothing really responsive.
I've tried to use the solution below but with
http://jsfiddle.net/rm7n73ep/`
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
Radio button's label 2
Does somebody know how to combine the property for the responsive behavior and for a correct alignment of labels and radio button?
Thanks a lot for your answer!
Add the following class
label{
display: block;
}
Check if this helps :
<div class="form-group">
<label class="col-md-5"> Your label </label>
<div class="col-md-7">
<div class="col-md-6">
<input type="radio" name="name1" value="0" checked/>
<label for="name1">Input 1</label>
<input type="radio" name="name2" value="1" />
<label for="name2">Input2</label>
</div>
</div>
</div>