I want to put a label for a radio input outside the div where the input is. Something like this
<div class="externalDiv">
<div class="internalDiv">
<input type="radio" id="someId"/>
</div>
<label for="someId"> Label content </label>
</div>
But it's not working this way unless I put the label inside the internal div. How can I make this work?
Edit: What I mean by not working is that when I click on label, the radio button does not get checked.
Try this code.
p,
label {
font: 1rem 'Fira Sans', sans-serif;
}
input {
margin: .4rem;
}
<fieldset>
<legend>Select a maintenance drone:</legend>
<div>
<input type="radio" id="huey" name="drone" value="huey"
checked>
<label for="huey">Huey</label>
</div>
<div>
<input type="radio" id="dewey" name="drone" value="dewey">
<label for="dewey">Dewey</label>
</div>
<div>
<input type="radio" id="louie" name="drone" value="louie">
<label for="louie">Louie</label>
</div>
</fieldset>
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; }
I want to make block for radio
This is my code.
<label> Rating
<input type="radio">great
<input type="radio">wonderful
</label>
But it does not work correctly.
label{
display: block;
}
<p> Rating</p>
<label for="radio1"><input type="radio" id="radio1" name="radiogroup1">great</label>
<label for="radio2"><input type="radio" id="radio2" name="radiogroup1">wonderful</label>
<div style="display:flex; width: 120px;">
<p style="flex:1">Rating</p>
<div style="flex:1">
<input type="radio">Good<br>
<input type="radio">Great
</div>
</div>
Do you mean something like this? You could also use a table to get the same effect.
Only with html:
<label> Rating: </label>
<p>
<input type="radio" name="rate" id="great">
<label for="great">great</label>
</p>
<p>
<input type="radio" name="rate" id="wonderful">
<label for="wonderful">wonderful</label>
</p>
Try this simple solution to display as list.
label li {
list-style:none;
}
<label> Rating
<li><input type="radio" name="group1">great</li>
<li><input type="radio" name="group1">wonderful </li>
</label>
You might not have do use any css here, you can create the structure using block elements.
Here you are trying to align a inline element in a block so you can use p, div or any other block element.
/* outline focus */
label:focus, input:focus{
outline: dotted 2px red;
}
/* No CSS to align the below elements */
<label for="rating"> Rating</label>
<p><label for="great">great</label><input type="radio" name="rating" id="great"></p>
<p><label for="wonderful">wonderful</label><input type="radio" name="rating" id="wonderful"></p>
I'm working on a One Pager website where I have a navigation menu. I'd want to have radio input associated to the clicked a, in order to apply some CSS to the active radio.
As you will see, the CSS is applied when I click on the radio, but not when I click on the link. I know I could do this using JavaScript, but I am trying to avoid growing my code base.
The second section of the snippet is what I'd want to achieve, but with an a tag in the label. The radio will be hidden, so clicking on the radio isn't an acceptable answer. How can I make the a tag and the input tag activate?
input[type=radio]:checked + label {
color:red;
background-color:green;
}
.working {
visibility: hidden;
width:0;
}
<html>
<body>
<div>
<h2>Not working with a tag</h2>
<div>
<input id="a" type="radio" name="menu1" value="a"/>
<label for="a">Input 1</label>
</div>
<div>
<input id="b" type="radio" name="menu1" value="b"/>
<label for="b">Input 2</label>
</div>
</div>
<div>
<h2>Expected result (without a, it doesn't work)</h2>
<div>
<input class="working" id="c" type="radio" name="menu2" value="a"/>
<label for="c">Input 1</label>
</div>
<div>
<input class="working" id="d" type="radio" name="menu2" value="b"/>
<label for="d">Input 2</label>
</div>
</div>
</body>
</html>
Right solution is here , try this.
<script type="text/javascript">
$(document).ready(function(){
$('[name=title_format]').click(function() {
$('[name=doc-title]').val('Title changed to '+$(this).val());
});
});
</script>
<style>
input[type=radio]:checked + label {
color:red;
background-color:green;
}
.working {
width:0;
}
</style>
<div>
<h2>Not working with a tag</h2>
<div>
<a href="#">
<input type="radio" name="title_format" class="title-format" id="title-format-0" value="0" checked="checked"> <label for="title-format-0">Input 1</label>
</a>
</div>
<div>
<a href="#">
<input type="radio" name="title_format" class="title-format" id="title-format-1" value="1">
<label for="title-format-1">Input 2</label>
</a>
</div>
</div>
<div>
<h2>Expected result (without a, it doesn't work)</h2>
<div>
<input class="working" id="c" type="radio" name="menu2" value="a"/>
<label for="c">Input 1</label>
</div>
<div>
<input class="working" id="d" type="radio" name="menu2" value="b"/>
<label for="d">Input 2</label>
</div>
</div>
Here's a working example of the label syntax: https://jsfiddle.net/93c3sscs/
If you're testing on IE11 or your customers use IE (not sure about Edge and other IE versions), you can't rely on labels to activate inputs. IE does not apply clickable functionality to <label><input></label>, and Microsoft put out 2 updates in the second half of 2015 that completely broke my app because of this by positioning the clickable area 5px above my widget sprites.
I'm trying to create a form to use for my work, I guess my question is more of a why does this happen.
<div class="checkbox">
<input type="radio" name="transport_method" >Delivery
<input type="radio" name="transport_method">Store Pick-Up
<input type="radio" name="transport_method" >Day Trip
</div>
my css class of "checkbox" looks like this
.checkbox {
float: left;
display: inline;
}
now my code at the next element
<div>First name:<br>
<input type="text" name="firstname"><br>
</div><br><br><br>
I have to add 3 <br>'s to get the "First name:" to be on a new line. I started with only 2 radio buttons and then I only needed 2 <br>'s. Is there a way to format my css to not need any <br>'s?
I think I need the <br>'s (correct me if I'm wrong) due to the fact that html file is reading the radio buttons as new lines and displaying them on one line, therefore the <br>'s fix that issue, but I don't like using them nor do I think it is semantically correct.
Let's start with a nicely marked up form
The form elements
The radio buttons can be wrapped in a <fieldset> element
The labels can all be marked up with <label> elements. The for attribute links to its input via the matching id attribute. One benefit of this is that users can click/touch on the label.
That gives us this:
<form>
<fieldset class="checkbox">
<input type="radio" name="transport_method" id="delivery">
<label for="delivery">Delivery</label>
<input type="radio" name="transport_method" id="pick-up">
<label for="pick-up">Store Pick-Up</label>
<input type="radio" name="transport_method" id="day-trip">
<label for="day-trip">Day Trip</label>
</fieldset>
<fieldset class="names">
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname">
<label for="lastname">Last name:</label>
<input type="text" name="lastname" id="lastname">
</fieldset>
</form>
Bring each text input onto a new line
The default display value for inputs is display: inline which brings them all onto one line. Use display: block on text inputs to knock them down:
input[type=text] {
display: block;
}
We want the radio buttons to remain on the one line, so they can be left at their default display: inline. More information on display.
Full example
Bring it all together with a little bit more CSS:
input[type=text] {
display: block;
margin: 5px 0;
}
input[type=radio] + label {
margin-right: 10px;
}
label,
input[type=radio] {
cursor: pointer;
}
fieldset {
border: none;
}
form {
background: #FFF9C4;
width: 500px;
font-family: sans-serif;
}
<form>
<fieldset class="checkbox">
<input type="radio" name="transport_method" id="delivery">
<label for="delivery">Delivery</label>
<input type="radio" name="transport_method" id="pick-up">
<label for="pick-up">Store Pick-Up</label>
<input type="radio" name="transport_method" id="day-trip">
<label for="day-trip">Day Trip</label>
</fieldset>
<fieldset class="names">
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname">
<label for="lastname">Last name:</label>
<input type="text" name="lastname" id="lastname">
</fieldset>
</form>
Try like this: Demo
<div class="checkbox">
<input type="radio" name="transport_method">Delivery
<input type="radio" name="transport_method">Store Pick-Up
<input type="radio" name="transport_method">Day Trip</div>
<div class="clear"></div>
<div>First name:
<input type="text" name="firstname">
</div>
.clear{clear:both} instead of <br/>
EDIT: If you dont want to create new class you can use like this too :
Updated dmo
.checkbox::after {
display:block;
clear:both;
content:"";
}
<div class="checkbox">
<input type="radio" name="transport_method" >Delivery
<input type="radio" name="transport_method">Store Pick-Up
<input type="radio" name="transport_method" >Day Trip
</div>
<div class="clear"></div>
<div>
First name:
<br>
<input type="text" name="firstname"><br>
</div>
<div class="clear"></div>
in css
.clear{
clear:both
}
It's as simple as this:
.checkbox{display:block}
And if you mean to have those checbox inputs floated to left, then use
.checkbox input{display:inline-block}
And there you go, no floats, no br tags, nothing weird
Using the new class amit made
use .clear{clear:both} instead of
on the following element, in my case
<div >First name:<br>
<input type="text" name="firstname"><br>
</div>
turned into
<div class="clear">First name:<br>
<input type="text" name="firstname"><br>
</div>
I'm trying to stack the checkboxes to the left side of the page. Any help would be much appreciated. Here's what I have so far:
<body>
<h1>Fitness Survey</h1>
<form class="pure-form" name="survey" method="post"action="mailto:email#youraddress.com" enctype="text/plain">
<fieldset>
<legend>Do you belong to a gym or fitness center?</legend>
<p>
<input type="radio" name="gym" value="yes">Yes
<input type="radio" name="gym" value="no">No
<br>
</p>
</fieldset>
<fieldset>
<legend>How do you stay in shape?</legend>
<p>
<input type="checkbox" name="exercises" value="classes">Fitness classes
<input type="checkbox" name="exercises" value="weights">Weights
<input type="checkbox" name="exercises" value="jogging">Jogging
<input type="checkbox" name="exercises" value="cardio machines">Cardiovascular machines
<input type="checkbox" name="exercises" value="swimming">Swimming
<input type="checkbox" name="exercises" value="team sports">Team sports
<input type="checkbox" name="exercises" value="other">Other
<br>
</p>
</fieldset>
<fieldset>
<legend>How often do you exercise?</legend>
<p>
<input type="radio" name="frequency" value="once per week">Once per week
<input type="radio" name="frequency" value="2-3 per week">2-3 times per week
<input type="radio" name="frequency" value="4-6 per week">4-6 times per week
<input type="radio" name="frequency" value="every day">Every day<br>
</p>
</fieldset>
<fieldset>
<legend><strong>Why do you exercise?</strong></legend>
<p>
<input type="checkbox" name="why" value="pleasure">I enjoy it
<input type="checkbox" name="why" value="fitness">I want to keep fit<br>
</p>
</fieldset>
<p>
<input type="submit"><input type="reset">
</p>
</form>
</body>
</html>
And the CSS is:
fieldset {
width: 400px;
border: 2px ridge #ff0000;
padding: 10px;
margin-bottom: 10px;
}
legend {
font-family: Georgia, "Times New Roman", serif;
font-weight: bold;
}
input {
font-family: Arial, sans-serif;
}
JSFiddle with the example
In order to improve semantics of your markup and solve your particular problem, I would suggest to:
Update markup for your inputs to have label element, like:
<fieldset>
<legend>Do you belong to a gym or fitness center?</legend>
<label><input type="radio" name="gym" value="yes" />Yes</label>
<label><input type="radio" name="gym" value="no" />No</label>
</fieldset>
Note absence of <br> and p elements. Those are not needed and are not adding any value to your code's semantics. Wrapping your inputs and text with label makes the text clickable (allowing to select a checkbox/radiobutton by clicking that text and not only the input itself) and associated with appropriate field.
In your CSS add the following:
.pure-form label {display: block; clear: left}
.pure-form input {float: left;}