In the HTML layout shown in the following screenshot, I want the radio buttons exactly under the Yes and No labels, but the CSS padding property does not seem to apply to the HTML input tag. The code is given.
How can I change the inline style so that the radio buttons are under the Yes and No labels.
JSFiddle here.
<html>
<div style="padding:25px;">
<div style="background-color:#bf5b5b; ">
<label style="padding-left:25px; padding-right:25px;">Yes</label>
<label style="padding-left:25px; padding-right:25px;">No</label>
<label style="padding-left:25px; padding-right:25px;"></label>
</div>
<div id="option_one_div" style="background-color:#74d4dd;">
<input style="padding-left:125px; padding-right:25px;" type="radio" name="radio" value="0">
<input style="padding-left:25px; padding-right:25px;" type="radio" name="radio" value="1">
<label style="padding-left:25px; padding-right:25px;" for="option_one_div">Label of first group of Radio Buttons</label>
</div>
<div id="option_two_div" style="background-color:#36d666;">
<input style="padding-left:25px; padding-right:25px;" type="radio" name="radio" value="0">
<input style="padding-left:25px; padding-right:25px;" type="radio" name="radio" value="1">
<label style="padding-left:25px; padding-right:25px;" for="option_two_div">Label of second group of Radio Buttons</label>
</div>
</div>
</html>
The idea of padding is that it adds space within the element. You appear to be trying to add space outside the element, for which you should be using margin.
This image may help to explain the concept.
(source: w3schools.com)
The point is, to add space around an element you'd normally use margin rather than padding.
On a side note, a lot of people make this mistake when adding padding to the body; they use margin instead and it yields unpredictable results).
Here's an example fiddle using your code, just with margin instead of padding (I modified the pixels to make it work properly).
Put span tag around input tags with left-padding:
Here is the JSFiddle
Here's my Fiddle
<input style="margin-left: 5%; padding-left:25px; padding-right:25px;" type="radio" name="radio" value="0">
<input style="margin-left: 7.5%; padding-left:25px; padding-right:25px;" type="radio" name="radio" value="1">
I used margin-left with percentage values. It looks like what you described you wanted - you can always replace percentage with pixel values if needed.
In your 2nd div i.e.
<div id="option_one_div" style="background-color:#74d4dd;">
the
<input style="padding-left:125px; padding-right:25px;" type="radio" name="radio" value="0">
here padding-left has 125 px. change it to 25 px your prob will be solved.
Hi why not just do this:
<html>
<div>
<div style="background-color:#bf5b5b; width:100%; float:left;">
<label style="width:15%; padding-left:3%">Yes<input type="radio" name="radio" value="0"></label>
<label style="width:15%;">No<input type="radio" name="radio" value="0"></label>
<label style="width:60%;">Label of first group of Radio Buttons</label>
</div>
<div style="background-color:#74d4dd; width:100%; float:left;">
<label style="width:15%; padding-left:3%">Yes<input type="radio" name="radio" value="0"></label>
<label style="width:15%;">No<input type="radio" name="radio" value="0"></label>
<label style="width:60%;">Label of teo group of Radio Buttons</label>
</div>
<div style="background-color:#36d666; width:100%; float:left;">
<label style="width:15%; padding-left:3%">Yes<input type="radio" name="radio" value="0"></label>
<label style="width:15%;">No<input type="radio" name="radio" value="0"></label>
<label style="width:60%;">Label of three group of Radio Buttons</label>
</div>
</div>
</html>
Then just add some # media css classes to make it full mobile responsive and stack-able too.
This will offer much more to you prospective site users as they can view it from their mobile devices with as much ease as they can from a pc.
Related
I have used a black colour background image for my HTML page. I want to change the radio button labels/ texts to white ( just like the questions) How do I do that? Following is my code snippet.This is how it is looking on the page.
<hr>
<label for="" style="color:white">Cigarette smoking status</label><br><br>
<input type="radio" name="cig-stat" style="color:white" value="0" id="never-smoke" required>Never Smoked Cigarettes<br>
<input type="radio" name="cig-stat" style="color:white" value="1" id="curr-smoker">Current Cigarette Smoker<br>
<input type="radio" name="cig-stat" style="color:white" value="2" id="former-smoker">Former Cigarette Smoker<br>
<hr>
You need to wrap those input elements in label tags (which also contain the texts for those respective radio buttons) and apply the styling to those.
BTW: In general it's better to have an external stylesheet for that purpose instead of using inline styles - among other things you avoid havin to repeat the same styles over and over when you simply can apply them to a particular HTML tag or a class.
body {
background: #555;
}
<hr>
<label for="" style="color:white">Cigarette smoking status</label><br><br>
<label for="cig-stat" style="color:white"><input type="radio" name="cig-stat" value="0" id="never-smoke" required>Never Smoked Cigarettes</label><br>
<label for="cig-stat" style="color:white"><input type="radio" name="cig-stat" value="1" id="curr-smoker">Current Cigarette Smoker</label><br>
<label for="cig-stat" style="color:white"><input type="radio" name="cig-stat" value="2" id="former-smoker">Former Cigarette Smoker</label><br>
<hr>
First, I'd set up your markup like this:
<fieldset>
<legend>Cigarette smoking status</legend>
<div>
<input type="radio" name="cig-stat" value="0" id="never-smoke" required />
<label for="never-smoke">Never Smoked Cigarettes</label>
</div>
<div>
<input type="radio" name="cig-stat" value="1" id="curr-smoker" />
<label for="curr-smoker">Current Cigarette Smoker</label>
</div>
<div>
<input type="radio" name="cig-stat" value="2" id="former-smoker" />
<label for="former-smoker">Former Cigarette Smoker</label>
</div>
</fieldset>
Then you can style the <legend> and <label> elements to color: white. I'd split the CSS up from the markup if possible. If not, you can keep them inline.
Here's a fiddle of the above in action:
https://jsfiddle.net/1k3gte76/
If you don't like the white border around the <fieldset> element then just add a border: none rule to that element.
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>
I would like to use these funky radio buttons though the radio buttons have an id=radio1, id=radio2, id=radio3 etc
I would like all of them to have id-radio1 so it writes the result to radio1 in the database:
Here is how I have normal radio buttons working in the past using the same id and they toggle between one another:
<div class="form-group col-md-12">
<label class="control-label form-check-inline">Gender</label>*
<div class="form-group">
<input type="radio" id="Gender" name="Gender" value="M" required="required" /><label class="control-label">Male</label>
<input type="radio" id="Gender" name="Gender" value="F" required="required" /><label class="control-label">Female</label>
</div>
</div>
$Gender=$_POST["Gender"];
INSERT INTO [dbo].[SubmissionsTBL]
[Gender]
VALUES
(,'".trimText($Gender)."')
Though, with the funky radio buttons chaning from this:
<div class="funkyradio">
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio" id="radio1" />
<label for="radio1">Male</label>
</div>
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio" id="radio2"/>
<label for="radio2">Female</label>
</div>
</div>
to this doesn't work - it doesn't allow me to toggle radio buttons:
<div class="funkyradio">
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio" id="radio1" />
<label for="radio1">Male</label>
</div>
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio" id="radio1"/>
<label for="radio2">Female</label>
</div>
</div>
What is stopping the toggle?
Thank you!
TL;DR: Due to the id and name attribute having the same value in your first example, I believe you may be confusing the two. With the database communication code you put up, it's grabbing the name="Gender" and not the id="Gender".
Additional information about id and class though you might find useful as an internet programmer:
The id attribute can only apply to one element per HTML document. I would suggest using the class attribute instead. The main difference between and id and a class is that a class can be applied to multiple elements.
Here is a working solution to the code you provided:
<div class="funkyradio">
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio1" id="radio1" class="radio_grp1"/>
<label for="radio1">Male</label>
</div>
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio1" id="radio2" class="radio_grp1"/>
<label for="radio2">Female</label>
</div>
</div>
I used the class .radio_grp1 as the name so that you know that you're referring to a group of radio buttons rather than just one.
Moreover, if you're using a library like bootstrap, it's very common that an element will already have an assigned class. To solve this issue, you can assign a single element multiple classes by adding a space in the string following the class attribute like so:
<input type="radio" name="radio" id="radio2" class="radio radio_grp1"/>
Hope this was useful!
Your code should be changed to something like this. the radio button's name is what is submitted to the back end, and the id is used for front-end things like label association.
id's should always be unique.
<div class="funkyradio">
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio1" id="radio1" />
<label for="radio1">Male</label>
</div>
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio1" id="radio2"/>
<label for="radio2">Female</label>
</div>
</div>
If by toggling, you mean the normal behavior of radio buttons, then that happens whenever all the radio buttons in the group have the same name.
I have two radio buttons, No and Yes. By default no is checked. I have css that styles the checked elements. But by default the styles only work if you physically check it. I want to style it right of page load without have to select it. Currently I am stumped. Thanks for your help
HTML
<div class="split">
<input id="contact-no" type="radio" name="contact" value="No" checked="checked">
<label for="contact-no">No</label>
</div>
<div class="split">
<input id="contact-yes" type="radio" name="contact" value="Yes">
<label for="contact-yes">Yes</label>
</div>
CSS
.am-form input[type="radio"] + label:hover, .am-form input[type="radio"]:checked + label{background: rgb(239,58,65);}
What it looks like on page load:
What It should Look like on page load and after you select it:
I had multiple hidden section with the same name/id, so I juts had to customize each one.
<div class="split">
<input id="ns-contact-no" type="radio" name="ns_contact" value="No" checked="checked">
<label for="ns-contact-no">No</label>
</div>
<div class="split">
<input id="fs-contact-yes" type="radio" name="ns_contact" value="Yes">
<label for="fs-contact-yes">Yes</label>
</div>
further down and hidden:
<div class="split">
<input id="bs-contact-no" type="radio" name="bs_contact" value="No" checked="checked">
<label for="bs-contact-no">No</label>
</div>
<div class="split">
<input id="bs-contact-yes" type="radio" name="bs_contact" value="Yes">
<label for="bs-contact-yes">Yes</label>
</div>
The following HTML is generated from a library and cannot be changed in any way, so I need a CSS only solution for my problem. I would like for the radio buttons to appear vertically instead of left to right to each other like so
This is my code.
<span class="buttonset" id="test">
<input type="radio" id="test_1" name="test" value="CC">
<label for="test_1">Option 1</label>
<input type="radio" id="test_2" name="test" value="PL">
<label for="test_2">Option 2</label>
<input type="radio" id="test_3" name="test" value="AL">
<label for="test_3">Option 3</label>
<input type="radio" id="test_4" name="test" value="HL">
<label for="test_4">Option 4</label>
<input type="radio" id="test_5" name="test" value="CL">
<label for="test_5">Option 5</label>
<input type="radio" id="test_6" name="test" value="CL">
<label for="test_6">Option 6</label>
</span>
See also http://jsfiddle.net/QHvhs/
Is there a pure CSS way to get a new line after each input and label element?
you can use css3 pseudo selector :after to insert a line break after every label, making the list vertical.
.buttonset label:after {
content:"\A";
white-space:pre;
}
live demo: Fiddle
This is more semantically better.
You shouldn't have the form elements inside of a SPAN, but rather use DIV.
<span class="buttonset" id="test">
to
<div class="buttonset" id="test">
And the way you should wrap LABEL is
<label for="test_6"><input type="radio" id="test_6" name="test" value="CL"> Option 6</label>
You can then use CSS selector in a better semantic way
.buttonset label {
display: block;
}