I can't figure out why the spacing between the radio input and link is different for the first element than for the other two.
Here is the HTML:
<div class="citationChoice">
<label for="mla">
<input type="radio" name="citation" value="mla" id="mla_button" checked="checked">
MLA
</label>
<label for="apa">
<input type="radio" name="citation" value="apa" id="apa_button">
APA
</label>
<label for="chicago">
<input type="radio" name="citation" value="chicago" id="chicago_button">
Chicago Manual of Style
</label>
</div>
jsFiddle
For some reason, without any css applied, the mla radio button is closer to the MLA link than the other radio buttons are to their adjacent links.
(I know the HTML is not completely correct. If at all possible, I have to leave the HTML as is.)
You had a space before <a and jsfiddle was interpreting that. The first MLA link did not have this space, that is why it sat closer to the radio button
BEFORE -
id="apa_button"> <a
AFTER FIX -
id="apa_button"><a
Related
So i am trying to add radio button on my survey form and the button and the text is completly in different positions so here is a picture of how it looks --> enter image description here
i tried display: inline; but still nothing changed
The below code will work as you expected. Just add necessary attributes like name and for.
<p>Would you recommend this survey to your friend:</p>
<input type="radio" name="test" value="yes">
<label for="test">Yes</label><br>
According to the picture, your input tag width is 100%, that's why you are facing this issue. Add class inside input and use this CSS your problem has been fixed.
<style>
.inline-radio{width: auto;}
</style>
**HTML**
<p>Would you recommend this survey to your friend:</p>
<input type="radio" name="test" value="yes" class="inline-radio" >
<label for="test">Yes</label>
I want to have a group of radio buttons, so that one of them appears twice.
The result would look like this:
The tricky point is that I want to achieve this in pure HTML/CSS (although I doubt CSS will help here).
Here is the code I wrote to produce the four radio buttons above:
<input type="radio" name="buttons" value="choice1" id="button1"/>
<label for="button1">Choice 1</label>
<input type="radio" name="buttons" value="choice1" id="button1"/>
<label for="button">Choice 1</label>
<input type="radio" name="buttons" value="choice2" id="button3"/>
<label for="button3">Choice 2</label>
<input type="radio" name="buttons" value="choice3" id="button4"/>
<label for="button4">Choice 3</label>
I naively thought that attributing the same value to the first to buttons would make them behave as one, but of course it doesn't.
Is it possible to achieve this behaviour without any JS?
Edit
This might sound strange, so here's my usecase.
What I ultimately want is to have a radio button storing a global state, and have access to it at multiple places.
For instance, suppose the following snippet:
.state-repeater {
visibility: hidden;
}
#button.state-repeater:checked > p {
color: blue;
}
<input type="radio" id="button" />
<label for="button">Button</label>
<!--
Lots of blocks; the two parts are totally uncorrelated;
so the classical sibling selector tricks do not work
-->
<input class="state-repeater" type=radio id="button" />
<p>The button is checked</p>
I want the <p> tag text to turn blue when the radio button is checked; however, due to the radio button being far from it, I need some kind of repeater.
Obviously, the approach of this snippet does not work.
Is it possible to "repeat" the information that the radio button is checked?
You'll need to use JS. There is no pure way. Maybe wrap the radio in an element that LOOKS like 2 radio buttons and when clicked they both LOOK like they've been selected. But if you need two actual radio buttons that work together, you are out of luck. And in any case the thing I described before would be a huge headache compared to using JS.
I'm about to style some checkboxes for Bootstrap 3, and I absolutely cannot get my head around why in their examples they use this markup:
<label>
<input type="checkbox"> Check me out
</label>
instead of this:
<input type="checkbox" id="a"><label for="a">Check me out</label>
I just would love to know why they went with the nested approach. I can't see any upsides. The huge huge downside is, that checked/unchecked states cannot be styled with CSS such as:
input:checked + label { }
The answer is user-experience. Nesting your radio or checkbox inputs inside a <label> provides additional functionality. Consider:
<label>
<input type="checkbox" value="">
This is my Checkbox Option inside a Label
</label>
In the above code the checkbox is selected by clicking on either the box itself or the text within the <label>.
While in the below code the <label> text is not clickable. The only way to select the checkbox is to click directly upon the box.
<input type="checkbox" value="">
<label>This is my Checkbox Option outside a Label</label>
so using the twitter bootstrap CSS framework,
if you display this html it will show with the text under the radio button, i want them to show to the right * or left of the radio button
this works if you replace Gender with Gender it will have the desired effect
however i do not have control over changing the tag to a span tag (im using a java based framework)
however i can prefix and suffix the html - shown in the example below
######## ADD PREFIX HTML ############<input type="radio" checked name="optionsRadios" value="option1" />
<label>Gender</label>#######ADD ADD SUFFIX THML ############
ur a wizard if you can get this working!, thanks guys
<div class="clearfix">
<label id="optionsRadio">Gender</label>
<div class="input">
<ul class="inputs-list" wicket:id="gender">
<li>
<label>
<input type="radio" checked name="optionsRadios" value="option1" />
<label>Gender</label>
</label>
</li>
<li>
<label>
<input type="radio" name="optionsRadios" value="option2" />
<label>Gender</label>
</label>
</li>
</ul>
</div>
The radio buttons on the bootstrap demo page render as you expect so there is either something in your own CSS causing this or a problem with your markup.
My guess is that the problem is because you have your radio buttons and your labels nested inside another label. Try removing the wrapper label and see if that works.
The label element must not have any nested label elements.
I have 4 radio buttons (A, B, C, D). When I click on the radio button A, there would be another 2 options - A1 and A2. The same will happen with the others. And if I choose D2, another 2 radio buttons would appear.
How can I do this in HTML?
HTML and CSS3-only version (Fiddle):
HTML for group "D" (other groups are similar)
<div>
<input type="radio" name="level0" value="D" id="D"/>
<label for="D">D</label>
<div class="sub1">
<div>
<input type="radio" name="level1" value="D0" id="D0"/>
<label for="D0">D0</label>
</div>
<div>
<input type="radio" name="level1" value="D1" id="D1"/>
<label for="D1">D1</label>
<div class="sub2">
<div>
<input type="radio" name="level2" value="D10" id="D10"/>
<label for="D10">D1-0</label>
</div>
<div>
<input type="radio" name="level2" value="D11" id="D11"/>
<label for="D11">D1-1</label>
</div>
</div>
</div>
</div>
</div>
CSS
.sub1, .sub2 { display: none; }
:checked ~ .sub1, :checked ~ .sub2 {
display: block;
margin-left: 40px;
}
If you want more radio buttons to appear when a certain one is selected, I would suggest not "nesting" them inside one another in the html. Have javascript display a hidden group or RBs when a one is selected.
Frankly, I think using radio buttons to make a select box appear would be much more user friendly, as its clear that you're selecting from a different group. Too many radio buttons always looks ugly.
Other problems with your code: id's should be unique, put the RB text beside the radio button as opposed to inside the tag, and avoid table based layout if possible. inline javascript and css should be avoided too, but as this is a code sample it actually makes it more readable. Oh, most importantly, you have the other buttons set to appear on onclick, so they won't go away if you unselect the RB :D
You can only use a specific id on one element in a document. You have to put different id's on each element and make them visible separately:
<input onclick="document.getElementById('extra1').style.visibility='visible';document.getElementById('extra2').style.visibility='visible';" type="radio" />Apple
<input type="radio" id="extra1" style="visibility:hidden" other choice here />
<input type="radio" id="extra2" style="visibility:hidden" other choice here />
#guffa I think I'll just modify your answer a bit. Put all the optional radio buttons inside a <div> element like this:
<input onclick='document.getElmentById("optional_buttons").style.display="block"' type="radio" />
<div id="optional_buttons" style="display: none;" >
optional radio buttons
</div>