I have the following html.
<td>
<div id="form_comparison" class="field radio_field">
<input type="radio" id="form_comparison_0" name="form[comparison]" value="1"/>
<label for="form_comparison_0">Increased</label>
<input type="radio" id="form_comparison_1" name="form[comparison]" value="2" />
<label for="form_comparison_1">About the same</label>
<input type="radio" id="form_comparison_2" name="form[comparison]" value="3" />
<label for="form_comparison_2">Decreased</label>
</div>
</td>
Using css, how can I position radio buttons vertically, so that labels are displayed just after their respective radio buttons in the same line?
I don't know why you've wrapped this inside a td element, if you are designing a form layout, than ignore tables and use div for designing your form. Coming to your question, you can wrap the labels around input tag and use display: block; for label
#form_comparison label {
display: block;
}
Wrap each input using label like this
<label for="form_comparison_0">
<input type="radio" id="form_comparison_0" name="form[comparison]" value="1"/>
Increased
</label>
Demo
If you don't have any permissions to change the markup, you can use CSS content property with white-space: pre; and that will give you the desired output
label:after {
content: "\A";
white-space: pre;
margin-bottom: 10px;
}
Demo (No Changes In The Markup)
Note: Use #form_comparison label instead of only label as it will
select and apply all label element in your website where
#form_comparison label will only select label elements inside
#form_comparison
Working FIDDLE Demo
Float your input and label, and for second row, clear the float to make a new row:
#form_comparison input {
float: left;
}
#form_comparison label {
float: left;
}
#form_comparison label + input {
clear: both;
}
Related
I want to position a label above and to the left edge of a text field. I put them together in a div. The only problem left is that I need the correct position or display attribute that the input field doesn't react to the label. In that way, I could write text-align:left or float: left to position the label at the very edge of the div and thus at the very edge of the label.
<div class="AlignLeft">
<input type="text" id="1" name="name" maxlength="100" required>
<label for="name" id="1">Align label left</label><br>
</div>
Thank you!
without CSS
to make that on click of the label, the input will be focused.
you will need that your <label> element, have the for="" attribute
this attribute needs the same id="" as the input. (not the name="")
for attribute (docs): https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for
for making the <label> be on the left
put the label before the <input>
make the input nested inside the <label>, then insert a span before the <input>
no css solution:
<div>
<label for="myId"> <!-- put here the id -->
<span>this is the label text</span> <!-- the text -->
<input type="text" id="myId"> <!-- input -->
</label>
</div>
with CSS
if you can't change the HTML structure, then follow this second way (using CSS)
The float property, you showed before seems to work fine.
so just change the for="" attribute to be equal to the id="" of <input>
.AlignLeft label {
float: left;
}
<div class="AlignLeft">
<input type="text" id="1">
<label for="1">Align label left</label><br>
</div>
or use CSS flex with the direction of reverse
using flexbox you have other advantages like gap or centering, and so on...
.AlignLeft {
display: flex;
/* solve the problem (now the text is on the left side) */
flex-direction: row-reverse;
/* you can center easily using flex, or in this case put it on the left of the page */
justify-content: left;
align-items: center;
/* add a gap is easier with flex */
gap: 1rem;
}
<div class="AlignLeft">
<input type="text" id="1">
<label for="1">Align label left</label><br>
</div>
Is it possible to create a radio button group without the round buttons in front of each element?
The reason I would like to implement this is, that in my case the user has to choose between 3 different languages and I would really like to add this selection to a <form> tag, change the color of the selected language and make it required, but in the same time I wanted it to look something like this:
___________________________
| Username | <--Text input
___________________________
___________________________
| Password | <--Text input
___________________________
____________________________
| EN | DE | FR | <--This is what I thought of... Horizontal selection
____________________________ of the language looking like a simple table with
3 rows and the plain text (EN, DE, FR) in it.
____________________________
| Login | <--Submit button
____________________________
I really hope that you're able to get my point :)
If you put the radio buttons inside the labels and then make them invisible the user can click the label to select the radio button that is inside it. Consider the following approach.
HTML:
<div>
<label><input type="radio"/>English</label>
<label><input type="radio"/>French</label>
</div>
CSS:
label > input[type=radio] {
visibility: hidden;
}
JSFiddle here: http://jsfiddle.net/gEXUT/
Note that this is just an example, you'd still need to add the radio group name and perhaps the option for German etc.
Yes and no.
If you build your form with input and labels, it will do, else,
you have to. :)
the idea is :
input[type=radio] {
position:fixed;
left:-9999px;
}
As being fixed and of the screen, your input radio won't be in the flow anymore.
If labels are well formed and link to theme with attribute for, you just need to clikc the label to checked your invisible radio input.
To style your form, don't mind those imputs, style your labels as wished.
<input type="radio" name="r-lang" id="r1"><label for="r1"> EN </label>
Cheers
I've actually written on this before, and made a jsfiddle example:
http://jsfiddle.net/Kyle_Sevenoaks/HzQBE/
I'll explain it though. (I've put the labels an radio buttons into a list for this example)
<li class="cardtype-item">
<input type="radio" name="preferred_color" id="red" value="Red" />
<label for="red"> Red</label>
</li>
The general idea is that you have labels linked to the radio buttons, but the radios are hidden (either by display, position, etc). Then you use CSS to style the labels exactly as you like, and because they're linked to the radio buttons (via "name" on the input and "for" on the label) you can have much more control over how they look.
li
{
background: #333;
color: #eee;
padding: 10px;
list-style-type: none;
float: left;
width: 100px;
}
li.selected
{
background: #eee;
color: #333;
box-shadow:inset 0px 0px 15px #999;
}
input[type=radio]
{
display: none;
}
The next part of the trick is to use Javascript (I've use jQuery) to add and remove the selected or active class on the label itself.
$('li.cardtype-item label, li.cardtype-item input').click( function() {
$(this).parents('li').addClass('selected');
$(this).parents().siblings('li').removeClass('selected');
});
var ident = $('input[type=radio]').attr("id");
if($('input[type=radio]').is('checked')) {
$('form').append(ident);
};
I hope this gives you pretty much what you're after.
try this
radio button html
<div class="buttonSlider">
<input type="radio" value=".." name="radio1" />
<input type="radio" value=".." name="radio1" />
<input type="radio" value=".." name="radio1" />
</div>
javascript
$(document).ready(function () {
$('.buttonSlider input').replaceWith('<div class="radiobox"> <input type="radio" name="radio1" value=".."/></div>');
$('.buttonSlider input').prop('checked', false);
$('.radiobox').click(function () {
var this_div = $(this);
if (this_div.find('input').is(':checked')) {
this_div.find('input').prop('checked', false);
this_div.css({ 'background-color': '#800001' });
}
else {
this_div.find('input').prop('checked', true);
this_div.css({ 'background-color': '#808080' });
}
})
})
css
.buttonSlider
{
background-color: #800001;
}
.buttonSlider .radiobox
{
height: 20px;
width: 100px;
border: 1px solid black;
background-color: #800001;
float: left;
}
.buttonSlider input
{
display: none;
}
Thanks to the help of everyone of you (and this awesome answer). I could finally implement it in my website.
This is my code:
HTML:
<div id="language">
<table id="languagetable" border="0px" cellspacing="0px">
<tr>
<td width="33.33333%">
<input type="radio" id="fr" name="languageselection" value="en">
<label for="en">FR</label>
</td>
<td width="33.33333%">
<input type="radio" id="en" name="languageselection" value="de" checked>
<label for="de">EN</label>
</td>
<td width="33.33333%">
<input type="radio" id="it" name="languageselection" value="it">
<label for="de">DE</label>
</td>
</tr>
</table>
</div>
CSS:
#languagetable input[type="radio"] {
display:none;
}
#languagetable label {
display:inline-block;
margin: 0 auto;
font-family: Arial;
font-size: 20px;
}
#languagetable input[type="radio"]:checked + label {
color: #99CC00;
}
HTML:
<label>
<input type="checkbox" />
</label>
<div>
stuff
</div>
I'd like to be able to style the DIV element depending on the checked state of the input, like
input ~ div{
display: none;
}
input:checked ~ div{
display: block;
}
Obviously the~ selector doesn't seem to work here. Neither does +
Is there any other solution (besides javascript) ?
Try this, im not sure what its cross browser compatibility is.
input:checked + div
{
background: #333;
height: 30px;
width: 30px;
}
This should work, but I wouldnt do it, I would do Javascript.
See my jsfiddle
Sadly there is no way to select an ancestor in pure CSS, which is what you would require to select an ancestor's sibling.
I have seen people surround other content with a label - while this is a very questionable practice, it would allow you to use the + selector to style the div:
<label>
<input type="checkbox" />
<div>
stuff
</div>
</label>
Edit:
Or this (thanks to #lnrbob for pointing it out)
<label for="myCheckbox">
This is my label
</label>
<input id="myCheckbox" type="checkbox" />
<div>
stuff
</div>
if any one need extra solution
<input id="myCheckbox" type="checkbox" />
<label for="myCheckbox"> This is my label</label>
<div>
show when check box is checked
</div>
and the css
#myCheckbox ~ label ~ div { display: none; }
#myCheckbox:checked ~ label ~ div { display: block; }
happy coding !!!
Given an html form like this:
<form action='/example/' id='example_form' method='POST' name='example_form'>
<fieldset>
<legend>Example form</legend>
<label for='age'>
Age
<input id='age' name='age' tabindex='1' type='text' />
</label>
<label for='gender'>
Gender
<select id='gender' name='gender' tabindex='2'>
<option disabled='disabled' id='gender' name='gender' value=''>Choose one:</option>
<option id='gender_female' name='gender' value='female'>Female</option>
<option id='gender_male' name='gender' value='male'>Male</option>
</select>
</label>
<label for='height'>
Height
<input id='height' name='height' size='3' tabindex='3' type='text' />
</label>
<label for='weight'>
Weight
<input id='weight' name='weight' size='4' tabindex='4' type='text' />
</label>
<input id='Save' tabindex='5' type='submit' value='Save' />
</fieldset>
</form>
How would you style it to get the classic table based layout of label to the left, field to the right, everything aligned vertically? Tables are obviously out of the question. I can't find anything on how to do this with implicit labels and just CSS.
If the answer is to not wrap the fields then so be it, but I'd prefer if a solution could be found for this as:
This is generated html.
I keep reading about how using implicit labels improves accessibility.
Any help/pointers/insight will be much appreciated.
Here are some basic stylings to get started
example jsfiddle
fieldset {width:300px;}
label {display:block;overflow:hidden;line-height:30px;}
label input, label select {float:right;}
input[type=submit] {float:right;width:100px;border:solid 1px;}
Or, depending on what you mean by 'vertically aligned', you could try this.
label {
display: block;
position:relative;
margin: 0 0 5px 0;
}
label > input,
label > select {
position: absolute;
left: 70px;
width: 100px;
}
jsfiddle here
or an alternative here
CSS will never cease to amaze me. Based on the answer of #magicalex I came up with the following:
label {
display: block;
position:relative;
text-align: right;
width: 100px;
margin: 0 0 5px 0;
}
label > input,
label > select,
input {
position: absolute;
left: 120px;
}
This manages to do most of what I had in mind, namely a horizontal layout with all the labels aligned to the right and all the fields aligned to the left, even if they were not the same width (which is unavoidable e.g. for iOS date pickers and the like).
However the JSFiddle illustrates the remaining problem of aligning a field if the label is broken into multiple lines (e.g. because of translations). But I guess this can be solved as well.
For the CSS gurus out there, this markup outputs a checkbox with a label Value1 to its right, but Value1 is too close to the checkbox.
<dd id="rr-element">
<label for="rr-1">
<input type="checkbox" value="1" id="rr-1" name="rr[]">
Value 1
</label>
</dd>
So I'm trying to create a padding-right effect to the right of the checkbox, but it's not working. The checkbox and label move together. How can I target the checkbox only or its text only so I create a padding gap?
dd label input {
padding-right:100px;
}
Use margin-right. padding is inside the element, and often acts funny with input elements because they are rendered using the OS's native input components, and are a mess to customize in general.
JSFiddle here
No unclickable gap between checkbox and label.
No line wrap disconnection of the checkbox and label.
No spaces added by code indentations.
More readable.
<dd id="rr-element">
<input type="checkbox" value="1" id="rr-1" name="rr[]">
<label for="rr-1">Value 1</label>
</dd>
<style>
#rr-element {
white-space: nowrap;
}
#rr-element label {
padding-left: 0.4em;
}
</style>