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>
Related
I tried this solution but it didn't work, any advice how it can be achieved?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-row">
<div class="col-4">
<p>Signing on behalf of</p>
<label class="radio-inline" style="">
<input type="radio" name="optradio" checked="true" style="padding-left:15px;">A Company
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="optradio" style="padding-left:15px;">An Individual
</label>
</div>
</div>
JSfiddle
input tag don't have closing tag, second wrap label inside span
and give it a margin
label span{
display:inline-block;
margin-left: 10px;
}
<div class="form-row">
<div class="col-4">
<p>Signing on behalf of</p>
<label class="radio-inline" style="">
<input type="radio" name="optradio" checked="true" style="padding-left:15px;"><span>A Company</span>
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="optradio" style="padding-left:15px;"><span>An Individual</span>
</label>
</div>
</div>
Edit: You can just separate the input and label and link them using an 'id' on the input and a 'for' attribute on the label. Then you can style your label to add the spacing.
<input id="company" type="radio" name="optradio" checked="true" /><span ></span><label for="company" class="radio-inline" style="padding-left:15px;"> A Company
</label>
Insted padding-left use margin-right. And don't use closing </input> tag, it is auto closing like <input />
.radio-class {
margin-right: 15px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-row">
<div class="col-4">
<p>Signing on behalf of</p>
<label class="radio-inline" style="">
<input type="radio" name="optradio" checked="true" class="radio-class" />A Company
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="optradio" class="radio-class" />An Individual
</label>
</div>
</div>
Taking off from Mr Belugin's idea above. This bit of css will add a right margin to all radio buttons. This solution required no additional class added to the many radio buttons in my form.
It basically adds a 4px right margin to all radio buttons.
input[type=radio] { margin-right:4px; }
So Im a complete beginner and Im stuck on some personal project. Im making forms and I want to have inputs from radio buttons all in the same line, but under the label. I know how to make all elements inline and I know that setting the block property should put them under label. But block element puts all of the inputs on its on line. What I want is all inputs to be on the same line, under lable. I can use tag in HTML, but I want to make it with CSS. Any tips?
<div class="radio" >
<label class="radio" for="age">Your age:</label>
<input type="radio" name="age">0-20
<input type="radio" name="age">20-40
<input type="radio" name="age">40-60
<input type="radio" name="age">60-80
<input type="radio" name="age">80-100
</div>
<div class="radio" >
<label class="radio" for="gender">Your gender</label>
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
</div>
just put a line break <br />
<div class="radio" >
<label class="radio" for="age">Your age:</label>
<br />
<input type="radio" name="age">0-20
<input type="radio" name="age">20-40
<input type="radio" name="age">40-60
<input type="radio" name="age">60-80
<input type="radio" name="age">80-100
</div>
<div class="radio" >
<label class="radio" for="gender">Your gender</label>
<br />
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
</div>
Set the label to display: flex; but make sure not to target the radio class or it will also effect the parent div and not work properly.
Instead of setting all of the radio buttons to display: block, setting just the label to display: block will get the effect you want. Block elements will start a new line (if needed) and force the next element to a new line as well. Since you want just the label to be on a new line by itself, setting it to display: block will do the trick.
label.radio {
display: block;
}
<div class="radio">
<label class="radio" for="age">Your age:</label>
<input type="radio" name="age">0-20
<input type="radio" name="age">20-40
<input type="radio" name="age">40-60
<input type="radio" name="age">60-80
<input type="radio" name="age">80-100
</div>
<div class="radio">
<label class="radio" for="gender">Your gender</label>
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
</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 this code:
<div class="divpere" >
<div class="divfille1" ><label>CIVILITE:</label></div>
<div class="divfille2" >
<input type="radio" ID="mademoiselle" runat="server" >Mademoiselle</input>
<input type="radio" ID="madame" runat="server">Madame</input>
<input type="radio" ID="monsieur" runat="server">Monsieur</input>
</div>
</div>
It's a labale and a list of radio buttons, when i try to check one of this radio button, it still not checked!!
What is the reason of this?
How can i fix my snippet?
Demo Fiddle
<div class="divpere" >
<div class="divfille1" ><label>CIVILITE:</label></div>
<div class="divfille2" >
<input name="samename" type="radio" id="mademoiselle" runat="server" /><label for="mademoiselle"> Mademoiselle</label>
<input name="samename" type="radio" id="madame" runat="server"/><label for="madame">Madame</label>
<input name="samename" type="radio" id="monsieur" runat="server"/><label for="monsieur">Monsieur</label>
</div>
</div>
You should mention the name attribute for your radio buttons and Don't forget to mention the same name values for all three radio buttons...
I am trying to replace checkboxes with images. I got the inputs hidden and the images shown using the label for the checkboxes, but when I click any of the checkboxes it only updates the first row of checkboxes. What am I doing wrong?
HTML:
<form action="">
<div>
<input type="checkbox" id="make-admin">
<label for="make-admin"></label>
<input type="checkbox" id="remove-member">
<label for="remove-member"></label>
</div>
<div>
<input type="checkbox" id="make-admin">
<label for="make-admin"></label>
<input type="checkbox" id="remove-member">
<label for="remove-member"></label>
</div>
<div>
<input type="checkbox" id="make-admin">
<label for="make-admin"></label>
<input type="checkbox" id="remove-member">
<label for="remove-member"></label>
</div>
</form>
CSS:
input[type="checkbox"]{
display: none;
}
input[type="checkbox"] + label:before{
content: url('https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/26/unchecked_checkbox.png');
}
input[type="checkbox"]:checked + label:before{
content: url('https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/26/checked_checkbox.png');
}
Fiddle:
http://jsfiddle.net/D351GN3R/8jW43/
Any help would be greatly appreciated. I have no idea what's going on here!
The problem is that your label elements are looking for the id you tied them to and you have the same IDs for each row. You need unique ids for each checkbox and to match the for on each label like so:
<form action="">
<div>
<input type="checkbox" id="make-admin">
<label for="make-admin"></label>
<input type="checkbox" id="remove-member">
<label for="remove-member"></label>
</div>
<div>
<input type="checkbox" id="make-admin2">
<label for="make-admin2"></label>
<input type="checkbox" id="remove-member2">
<label for="remove-member2"></label>
</div>
<div>
<input type="checkbox" id="make-admin3">
<label for="make-admin3"></label>
<input type="checkbox" id="remove-member3">
<label for="remove-member3"></label>
</div>
</form>
fiddle: http://jsfiddle.net/EWpLq/