Is there a way to make the vertical spacing between radio buttons even? If you look at the image, you can see that the vertical spacing is uneven, and it causes me great personal pain. I thought it was because of the superscripts, so I put each and every button structure in a div and used CSS to set the height of those divs to so something large. It didn't matter how tall I made the divs. They did spread out vertically, but they remained unevenly spaced (like the narrow space between Quadratic and Inverse was always narrower than everything else).
.mathClass {
font-family: serif;
font-weight: 500;
font-size: 110%;
margin: 0;
padding: none;
}
.radioClass {
display: block;
position: relative;
padding-left: 20px;
padding-top: 0;
padding-bottom: 0 margin: 0px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.radioMark {
position: absolute;
bottom: 4px;
left: 0;
height: 12px;
width: 12px;
background-color: #D0D0D0;
border-radius: 50%;
border: 1px solid #4C6A94;
}
Models:
<form>
<label class="radioClass"> None
<input type="radio" onclick="computeAll()" name="usefit" id="fitNone" checked>
<span class="radioMark"></span>
</label>
<label class="radioClass"> Exactly Proportional :  <i class="mathClass">y = x</i>
<input type="radio" class="radioClass" onclick="computeAll()" name="usefit" id="yEqualsX">
<span class="radioMark"></span>
</label>
<label class="radioClass"> Proportional :  <i class="mathClass">y = Ax</i>
<input type="radio" class="radioClass" onclick="computeAll()" name="usefit" id="yEqualsAX">
<span class="radioMark"></span>
</label>
<label class="radioClass"> Linear : <i class="mathClass">y = Ax + B </i>
<input type="radio" onclick="computeAll()" name="usefit" id="fitLinear">
<span class="radioMark"></span>
</label>
<label class="radioClass"> Square Law : <i class="mathClass">y = Ax<sup>2</sup></i>
<input type="radio" onclick="computeAll()" name="usefit" id="fitSquare">
<span class="radioMark"></span>
</label>
<label class="radioClass"> Quadratic :  <i class="mathClass">y = Ax<sup>2</sup> + Bx + C</i>
<input type="radio" onclick="computeAll()" name="usefit" id="fitQuadratic">
<span class="radioMark"></span>
</label>
<label class="radioClass"> Inverse :  <i class="mathClass">y = A/x</i>
<input type="radio" onclick="computeAll()" name="usefit" id="fitInverse">
<span class="radioMark"></span>
</label>
<label class="radioClass"> Inverse Square :  <i class="mathClass">y = A/x<sup>2</sup></i>
<input type="radio" onclick="computeAll()" name="usefit" id="fitInverseSquare">
<span class="radioMark"></span>
</label>
I figured out how to make the lines evenly spaced. By examining the page carefully, I figured out that if label contains text with a superscript, then an extra 4 pixels of vertical padding are added to the label. Putting each label in a fixed height div doesn't help, because the padding still shifts the label within the div.
The (completely and totally inelegant) fix was to manually add 4 pixels of top padding to the labels that don't contain superscripts. I did this in the HTML with a style= because there are so many separate entries in the CSS associated with styling the radio buttons. Creating separate classes for radio buttons with and without superscript labels and duplicating all that CSS seemed silly.
Related
How can I put each individual checkbox and label on separate lines? I've tried everything.
Here's my markup:
<label>What would you like to see improved? <label class="optional">(Check all that apply)</label>
<input value="1" type="checkbox">Front-end Projects</input>
<input value="2" type="checkbox">Back-end Projects</input>
<input value="3" type="checkbox">Data Visualization</input>
<input value="4" type="checkbox">Challenges</input>
<input value="5" type="checkbox">Open Source Community</input>
<input value="6" type="checkbox">Gitter help rooms</input>
<input value="7" type="checkbox">Videos</input>
<input value="10" type="checkbox">City Meetups</input>
<input value="11" type="checkbox">Wiki</input>
<input value="12" type="checkbox">Forum</input>
<input value="13" type="checkbox">Additional Courses</input>
You need to adjust your markup a bit. Firstly, the <label> should not be used to group a collection of inputs, it should be used to describe which each input is.
Labels and checkbox input fields are by default, inline, so they would not go on separate lines without either some CSS making it block-level, or placing it inside a block-level element such as a <div>.
As for the checkbox size, this isn't so straightforward. You have to essentially mimic the checkbox by using pseudo-elements (:before or after) inside a label to make it selectable.
I've made one using your content below.
.form-control {
display: grid;
grid-template-columns: 1em auto;
gap: 0.5em;
}
/* Make a gap between each option */
.form-control + .form-control {
margin-top: 1em;
}
input[type="checkbox"] {
appearance: none;
background-color: #fff;
margin: 0;
font: inherit;
color: currentColor;
width: 1.15em;
height: 1.15em;
border: 0.15em solid currentColor;
border-radius: 0.15em;
transform: translateY(-0.075em);
display: grid;
place-content: center;
}
input[type="checkbox"]::before {
content: "";
width: 0.65em;
height: 0.65em;
transform: scale(0);
box-shadow: inset 1em 1em black;
}
input[type="checkbox"]::before {
content: "";
width: 0.65em;
height: 0.65em;
transform: scale(0);
box-shadow: inset 1em 1em black;
}
input[type="checkbox"]:checked::before {
transform: scale(1);
}
<p>What would you like to see improved? <span class="optional">(Check all that apply)</span></p>
<label class="form-control"><input type="checkbox" value="1">Front-end Projects</label>
<label class="form-control"><input type="checkbox" value="2">Back-end Projects</label>
<label class="form-control"><input type="checkbox" value="3">Data Visualization</label>
<label class="form-control"><input type="checkbox" value="4">Challenges</label>
<label class="form-control"><input type="checkbox" value="5">Open Source Community</label>
<label class="form-control"><input type="checkbox" value="6">Gitter help rooms</label>
<label class="form-control"><input type="checkbox" value="7">Videos</label>
<label class="form-control"><input type="checkbox" value="8">City Meetups</label>
<label class="form-control"><input type="checkbox" value="9">Wiki</label>
<label class="form-control"><input type="checkbox" value="10">Forum</label>
<label class="form-control"><input type="checkbox" value="11">Additional Courses</label>
<input> doesn't have an end tag </input>. There's two ways to use a <label> that's valid:
Wrap it around a form control
<label> <input> </label>
Add an #id to the form control and for attribute to the <label>
<input id='data'> <label for="data">Data</label>
In order to change the size of a checkbox or radio button use CSS property transform and function value scale() you'll need translateY() in order to adjust their vertical position as well.
You can make a new line-break by adding a <br> in HTML. See example.
<style>
[type='checkbox'] {
transform: scale(1.25) translateY(0.75px);
}
</style>
<fieldset>
<legend>What would you like to see improved? (Check all that apply)</legend>
<input id="chx1" type="checkbox"> <label for="chx1">Front-end Projects</label><br>
<input id="chx2" type="checkbox"> <label for="chx2">Back-end Projects</label><br>
<input id="chx3" type="checkbox"> <label for="chx3">Data Visualization</label><br>
<input id="chx4" type="checkbox"> <label for="chx4">Challenges</label><br>
<input id="chx5" type="checkbox"> <label for="chx5">Open Source Community</label>
</fieldset>
I have used display:flex to style a number of radio buttons so that they appear side by side, rather than in one long column. I thought by using margin:auto in combination with this, the child elements would appear grouped but in the center of the page horizontally. Clearly this isn't the case, so any help would be appreciated please.
Here is what I have currently:
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
background-color: red;
display: inline-block;
line-height: 4vw;
text-align: center;
width: 18vw;
}
label {
background-color: orange;
display: inline-block;
line-height: 4vw;
color: white;
text-align: center;
width: 18vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<section style="display:flex; margin:auto;">
<div>
<p>Amount:</p>
</br>
<input type="radio" name="Amount" id="Amount1" value="single" / checked>
<label for="Amount1">Amount 1</label>
</br>
</br>
<input type="radio" name="Amount" id="Amount2" value="multi" />
<label for="Amount2">Amount 2</label>
</div>
<span style="width:5vw;display:inline-block"></span>
<div>
<p>Term:</p>
</br>
<input type="radio" name="Term" id="Term1" value="0" / checked>
<label for="Term1">Term 1</label>
</br>
</br>
<input type="radio" name="Term" id="Term2" value="1" />
<label for="Term2">Term 2</label>
</div>
<span style="width:5vw;display:inline-block"></span>
<div>
<p>Phone:</p>
</br>
<input type="radio" name="Phone" id="Phone1" value="0" / checked>
<label for="Phone1">Phone 1</label>
</br>
</br>
<input type="radio" name="Phone" id="Phone2" value="1" />
<label for="Phone2">Phone 2</label>
</div>
</section>
I have used viewport width throughout the project, as I have further CSS styling to change element sizes based on media queries. So I need a solution that still keeps this styling if possible.
Using the following should help:
justify-content: center
On the display:flex class.
Source: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I know you can use display:inline but it doesn't seem to be working in this case. Maybe it has something to do with display:block for the inputs and labels.
My inputs and labels are moving down diagonally relative to one another.
See screencast: http://screencast.com/t/pFGzbRvTSy
input, label {
display: block;
margin-top: 5px;
vertical-align: top;
}
input {
display: inline;
float: left;
margin-right: 10px;
}
<label for="start age">START AGE</label>
<input type="number" name="start age"></input>
<label for="retirement age">RETIREMENT AGE</label>
<input type="number" name="retirement age"></input>
<label for="current income">CURRENT INCOME</label>
<input type="number" name="current income"></input>
<label for="inflation">INFLATION</label>
<input type="number" name="inflation"></input>
<label for="monthly disability benefit">MONTHLY DISABILITY BENEFIT</label>
<input type="number" name="monthly disability benefit"></input>
Yep, the explanation for this one is easy too, you have a display: inline property that gets overwritten by float: left since float: left makes your element a block again by setting display: block and applying other positioning.
One of the effects is that a floated element and a block element can exist in one line.
The other fact is that your label is display: block which will cause it to fill the entire screen width.
What happens then is the next element which is a float: left label gets pushed down one line and the label floats next to it taking up the rest of the horizontal space, this continues to create that stair effect that you're seeing.
To solve it and have the inputs and labels next to each other the best thing you could do is wrap each <input> and <label> within a <div> with a class and apply float: left to that div.
e.g.
.float-left {
max-width: 20%; /*added this for illustration*/
float: left;
}
label, input {
display: block;
padding: 4px;
}
<div class="float-left">
<label for="start_age">START AGE</label>
<input type="number" name="start_age" />
</div>
<div class="float-left">
<label for="retirement_age">START AGE</label>
<input type="number" name="retirement_age" />
</div>
<div class="float-left">
<label for="current_income">START AGE</label>
<input type="number" name="current_income" />
</div>
<div class="float-left">
<label for="inflamation">START AGE</label>
<input type="number" name="inflamation" />
</div>
<div class="float-left">
<label for="monthly_disability_benefit">START AGE</label>
<input type="number" name="monthly_disability_benefit" />
</div>
P.S.
I changed the for and name attributes of the fields to no longer have whitespace but using _ (underscore) characters instead - this just makes sure that your labels get understood correctly. It is usually a good idea to avoid spaces wherever you can with those kinds of things.
And as also stated in the comments, I removed the closing </input> tags as the <input /> tag is a self-closing empty tag
Oops sorry, I looked at the screencast and saw what you needed so I added that as well. (See second snippet at the bottom of this answer).
1 - 6 still apply.
In addition:
Add a <br/> after the text of the <label>
There's no closing tag for <inputs/> </input>
If you place your <inputs> inside your <label>, the text will line up in conjunction with vertical-align: baseline (see below)
I believe the for attribute targets id only, for doesn't associate with name.
float: left deleted, floats are archaic and delicate. If used incorrectly, they cause a horrific illogical mess of layouts (as it already has done to yours).
Made the width of inputs to the size of expected content (don't need 15 digits for age).
As a matter of aesthetics, don't use upper caps, I added a touch of class by using font-variant: small-caps ;-)
Relevant CSS
label {
display: inline-block;
margin: 5px;
vertical-align: baseline;
line-height: 1.5;
font-size: 16px;
font-variant: small-caps;
}
input {
display: inline-block;
line-height: 1.5;
padding: 0 3px;
}
I know this demo is just a demo, but if you get in the habit of doing little things, it becomes second nature and won't slow you down.
label {
display: inline-block;
margin: 5px;
vertical-align: baseline;
line-height: 1.5;
font-size: 16px;
font-variant: small-caps;
}
input {
display: inline-block;
line-height: 1.5;
padding: 0 3px;
}
#startAge {
width: 32px;
}
#retirementAge {
width: 32px;
}
#currentIncome {
width: 84px;
}
#inflation {
width: 64px;
}
#monthlyDisabilityBenefit {
width: 84px;
}
<label for="startAge">Start Age
<input type="number" id="startAge"></label>
<label for="retirementAge">Retirement Age
<input type="number" id="retirementAge"></label>
<br/>
<label for="currentIncome">Current Income
<input type="number" id="currentIncome"></label>
<br/>
<label for="inflation">Inflation
<input type="number" id="inflation"></label>
<br/>
<label for="monthlyDisabilityBenefit">Monthly Disability Benefit
<input type="number" id="monthlyDisabilityBenefit"></label>
label {
display: inline-block;
font-variant: small-caps;
}
input {
width: 185px;
}
<label for="startAge">Start Age
<br/>
<input type="number" id="startAge">
</label>
<label for="retirementAge">Retirement Age
<br/>
<input type="number" id="retirementAge">
</label>
<label for="currentIncome">Current Income
<br/>
<input type="number" id="currentIncome">
</label>
<label for="inflation">Inflation
<br/>
<input type="number" id="inflation">
</label>
<label for="monthlyDisabilityBenefit">Monthly Disability Benefit
<br/>
<input type="number" id="monthlyDisabilityBenefit">
</label>
i hope it will help i also added <br> tag with every line to get the the text box and label vertical
input, label {
margin-top: 5px;
}
input {
display: inline;
margin-right: 10px;
}
<label for="start age">START AGE</label><br>
<input type="number" name="start age"></input><br><br>
<label for="retirement age">RETIREMENT AGE</label><br>
<input type="number" name="retirement age"></input><br><br>
<label for="current income">CURRENT INCOME</label><br>
<input type="number" name="current income"></input><br><br>
<label for="inflation">INFLATION</label><br>
<input type="number" name="inflation"></input><br><br>
<label for="monthly disability benefit">MONTHLY DISABILITY BENEFIT</label><br>
<input type="number" name="monthly disability benefit"></input><br><br>
I'm using the following mark up and styles (Bootstrap). It shows my checkbox but it is paralysed, that is, it cannot be checked. here is my mark up:
I want something more Bootstrap-ish. I know there are other options to make the checkbox look fancy but that do not solve the problem.
<div class="form-group">
<div class="checkbox">
1.
<input type="checkbox" name="options" id="chk2" />
<label class="checkbox-label">Option 2</label>
</div>
</div>
Here is how it looks.
What exactly is the issue?
If I put the input element inside label I get this ugly thing:
<input type="checkbox" name="options" id="chk2" />
<label class="checkbox-label">Option 2</label>
The problem is with your label. The for attribute must match with the name attribute of your label
Looks need to tweak bootstrap styling for custom checkbox.
Check this
HTML
<div class="form-group">
<div class="checkbox">
<label for="check">
<input type="checkbox" id="check"/>
<span class="fake-input"></span>
<span class="fake-label">Option 2</span>
</label>
</div>
</div
CSS
.fake-input {
float: left;
width: 20px;
height: 20px;
border: 1px solid #9f9f9f;
background: #fff;
vertical-align: middle;
position: relative;
margin-right: 10px;
border-radius: 4px;
}
input[type="checkbox"] {
position: fixed;
top: -9999px;
left: -9999px;
}
input[type="checkbox"]:checked + .fake-input:before {
content:"\2713";
position: absolute;
color: #000;
text-align: center;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Check in Fiddle
Reading around it looks like you have to style the checked version and the unchecked version.
input[type=checkbox]:checked {
}
Styling with this tag should solve your problems.
Use "for" attribute to solve this issue.
<div class="form-group">
<div class="checkbox">
1.
<input type="checkbox" name="options" id="chk2" />
<label for="chk2" class="checkbox-label">Option 2</label>
</div>
</div>
<div class="col-md-3">
<input class="form-check-input" type="checkbox" id="" asp-for="">
<label class="form-check-label" for="" asp-for="">
</label>
</div>
It's not due to Bootstrap but to Wordpress. The checkboxes became visible after I added "display:block;" to the css of the checkbox input tag.
<input class="form-check-input" type="checkbox" id="">
input.form-check-input {
display:block;
}
What's the best way to use <input type="radio"> in HTML?
I'm looking for HTML that's semantically good, whose formatting is configurable via CSS.
I want to be able to style/render it to look something like:
Car: (o) Yes
(X) No
(o) Maybe
Train: (o) Yes
(o) No
(X) Maybe
Address: [An input text box ]
Thinking of the CSS, I think that I'd like the labels on the left (e.g. "Car" and "Bus") to be in some kind of text-align: right block?
I don't know about the radio buttons on the right: in some kind of <span> perhaps, with "display: inline-block"? Or "white-space: pre"?
What kind of block-level tags (e.g. <p> or <div>) and/or other tags (e.g. <span> or <br/>) would you recommend?
Edit:
How about the following.
HTML uses <legend>, like HTML is supposed to and as recommended in the alistapart article:
<fieldset>
<legend>Car</legend>
<label><input type="radio" name="car" value="yes"/> Yes</label>
<label><input type="radio" name="car" value="no"/> No</label>
<label><input type="radio" name="car" value="maybe"/> Maybe</label>
</fieldset>
To make it easer for Firefox to access/position the contents of the <legend>, place it within a <span>:
<fieldset>
<legend><span>Car</span></legend>
<label><input type="radio" name="car" value="yes"/> Yes</label>
<label><input type="radio" name="car" value="no"/> No</label>
<label><input type="radio" name="car" value="maybe"/> Maybe</label>
</fieldset>
Then, use the browser-specific CSS described in Legends of Style Revised to position the contents of the span to left of the fieldset.
Does the CSS really have to be so complicated and browser-specific? What's the simplest CSS which ought theoretically to work, instead of the more-complicated CSS required to actually work with those imperfect browsers? If <legend> is hard to position then what's a good (semantic) alternative?
This is what I usually do with my radio buttons and checkboxes. It allows the associated text to be clickable in most browsers without having to do any work, which makes the form a little easier to use. The CSS cursor change helps to alert the user to this feature.
CSS
label { cursor: pointer; }
HTML
<label><input type="radio" name="option" value="yes"> Yes</label>
<label><input type="radio" name="option" value="no"> No</label>
<label><input type="radio" name="option" value="maybe"> Maybe</label>
Alternatively, use a fieldset legend for cars and a ul for the list of radio buttons:
<fieldset>
<legend>Cars</legend>
<ul class="radio-list">
<li><label><input type="radio" name="option" value="yes"> Yes</label></li>
<li><label><input type="radio" name="option" value="no"> No</label></li>
<li><label><input type="radio" name="option" value="maybe"> Maybe</label></li>
</ul>
<fieldset>
CSS
.radio-list li { list-style: none; }
Stylizing a fieldset/legend to be consistent across browsers isn't too difficult; however, it does require one IE conditional if you want a border around the legend. The only extra HTML that is necessary is a wrapper span within the legend.
CSS
<style>
fieldset {
position: relative;
border: 1px solid #000;
background: #f8f8f8;
padding: 1.6em 10px 0px;
margin: 0;
}
legend {
position: absolute;
font-weight: bold;
font-size: 1.2em;
}
legend span {
position: absolute;
top: -1.1em;
white-space: nowrap;
}
/* This isn't necessary, just here for list aesthetics */
ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
</style>
<!--[if IE]>
<style>
legend {
border-bottom: 1px solid #000;
}
</style>
<![endif]-->
HTML
<fieldset>
<legend><span>Did you enjoy your SO experience?</span></legend>
<form>
<ul>
<li><label><input type="radio" name="option" value="yes"> Yes</label></li>
<li><label><input type="radio" name="option" value="no"> No</label></li>
<li><label><input type="radio" name="option" value="maybe"> Maybe</label></li>
</ul>
</form>
</fieldset>
That's about as simple as I can get it. Live example
Mmmm.... Car and Train should definitely be <label>s. Check out this classic A List Apart article for a really nice example: Prettier Accessible Forms
As for the radio button labels: Good question! I'd say <label> s again, but a <span> would do as well.
css: (ugly class names need to be changed)
p.radio { height: 4em; }
label.top {
display: block;
width: 4em; /* or something else */
float: left;
text-align: right;
padding-right: 1em;
height: 4em;
}
html:
<p class="radio">
<label class="top" for="car">Car:</label>
<input type="radio" value="yes" name="car" id="car_y" />
<label for="car_y">Yes</label><br />
<input type="radio" value="no" name="car" id="car_n" />
<label for="car_n">No</label><br />
<input type="radio" value="maybe" name="car" id="car_m" />
<label for="car_m">Maybe</label><br />
</p>
EDIT: didn't see the other answer. Using a fieldset instead of a paragraph and legend for the "top-level" label seems to be a good idea IMO.
EDIT2: according to comments, and I agree, using a list would be cleaner here. The new version would be :
css:
fieldset {
border: 0;
padding: 0;
}
legend {
padding: 0 0.5em 0 0;
margin: 0;
display: block;
width: 3.5em;
float: left;
text-align: right;
}
ul {
margin: 0;
padding: 0 0 0 4em;
}
ul li {
list-style-type: none;
list-style-position: outer;
}
html:
<fieldset>
<legend>Car:</legend>
<ul>
<li>
<input type="radio" value="yes" name="car" id="car_y" />
<label for="car_y">Yes</label>
</li>
<li>
<input type="radio" value="no" name="car" id="car_n" />
<label for="car_n">No</label>
</li>
<li>
<input type="radio" value="maybe" name="car" id="car_m" />
<label for="car_m">Maybe</label>
</li>
</ul>
</fieldset>
That would be much more elegant. But even with display:block firefox doesn't seem to want to set the width of a legend element. Strange bug.
I'll use <fieldset>.
The difficulty with positioning a <label> in different browsers is described in the "Legends of Style Revised" article; so instead of using a <label> and trying to position it, I might use a <span class="label"> outside the <fieldset>.