I know I can make radio button below label like this
.radioGroupBelow label{
display:inline-block;
text-align:center;
margin:0 0.2em;
}
.radioGroupBelow label input[type="radio"] {
display:block;
margin:0.5em auto;
}
<div class="radioGroupBelow">
Fruits:
<label for="fruit1"> Orange
<input type="radio" name="fruits" id="fruit1">
</label>
<label for="fruit2">Apple
<input type="radio" name="fruits" id="fruit2">
</label>
<label for="fruit3">Grape
<input type="radio" name="fruits" id="fruit3">
</label>
<label for="fruit4">Lemon
<input type="radio" name="fruits" id="fruit4">
</label>
</div>
Here is working fiddle
http://jsfiddle.net/Victornpb/uHjpa/
But I need to put label below radio buttons?
With your code you can simply move the labels after the checkbox for the desired effect. Here is a jsfiddle
<label for="fruit1">
<input type="radio" name="fruits" id="fruit1">
Orange
</label>
Related
I'm trying to highlight the label behind the first unchecked checkbox on the entire page made up by something like this (omitted the extra html in between the div tags for clarity):
.challenges input[type="checkbox"]:not(:checked)~label {
color: lime;
}
<div class="challenges">
<input type="checkbox">
<label for="">test 01</label>
<input type="checkbox">
<label for="">test 02</label>
<input type="checkbox">
<label for="">test 03</label>
</div>
<div class="challenges">
<input type="checkbox">
<label for="">test 01</label>
<input type="checkbox">
<label for="">test 02</label>
<input type="checkbox">
<label for="">test 03</label>
</div>
<div class="challenges">
<input type="checkbox">
<label for="">test 01</label>
<input type="checkbox">
<label for="">test 02</label>
<input type="checkbox">
<label for="">test 03</label>
</div>
<div class="challenges">
<input type="checkbox">
<label for="">test 01</label>
<input type="checkbox">
<label for="">test 02</label>
<input type="checkbox">
<label for="">test 03</label>
</div>
But that checks all the checkboxes which are net checked. I've been trying with first-of-type etc but that didn't work out.
[From comments] Was hoping to find a CSS only way to indicate the label behind the first unchecked checkbox instead of going for a JavaScript approach and add extra fluff which might not be needed. If there's a way with CSS only with some reshuffling or adding some html element to the above please provide it.
Only possible if they are all on the same level, if the multiple grouping DIVs were reduced to just one, so that they all have the same parent.
Then you can set the color for the one checkbox immediately following an unchecked checkbox, and reset it for every label behind a checkbox that is a sibling following the unchecked one ...
.challenges input[type="checkbox"]:not(:checked) + label {
color: lime;
}
.challenges input[type="checkbox"]:not(:checked) ~ input[type="checkbox"] + label {
color: #000;
}
<div class="challenges">
<input type="checkbox">
<label for="">test 01</label>
<input type="checkbox">
<label for="">test 02</label>
<input type="checkbox">
<label for="">test 03</label>
<input type="checkbox">
<label for="">test 01</label>
<input type="checkbox">
<label for="">test 02</label>
<input type="checkbox">
<label for="">test 03</label>
<input type="checkbox">
<label for="">test 01</label>
<input type="checkbox">
<label for="">test 02</label>
<input type="checkbox">
<label for="">test 03</label>
<input type="checkbox">
<label for="">test 01</label>
<input type="checkbox">
<label for="">test 02</label>
<input type="checkbox">
<label for="">test 03</label>
</div>
// get all checkboxes
var firstUncheckedInput = document.querySelectorAll('.challenges input[type="checkbox"]')[0];
firstUncheckedInput.classList.add('firstCheckbox');
.challenges > label{
display:flex;
align-items: center;
}
.challenges .firstCheckbox:not(:checked) + span {
color: red;
}
<fieldset class="challenges">
<label>
<input type="checkbox">
<span>test 1</span>
</label>
<label>
<input type="checkbox">
<span>test 2</span>
</label>
<label>
<input type="checkbox">
<span>test 3</span>
</label>
</fieldset>
<br>
<fieldset class="challenges">
<label>
<input type="checkbox">
<span>test 4</span>
</label>
<label>
<input type="checkbox">
<span>test 5</span>
</label>
<label>
<input type="checkbox">
<span>test 6</span>
</label>
</fieldset>
I was facing the same problem and was able to extend #misorude's excellent answer by adding display: inline-block and specifying an explicit width for both the enclosing <div> and the individual <label> elements. em-based width specifications seem to work best to accommodate the width of the actual checkbox while still providing flexibility with different font sizes. I'm not saying that this is necessarily a recommended way of solving this in CSS, but if you absolutely must, this did the trick for me. I only tested with Chrome, so YMMV.
<html>
<head>
<style>
.steps
{
font-family: '.AppleSystemUIFont';
font-size: 17px;
font-weight: normal;
width: 37em;
color: #777;
}
.steps input[type="checkbox"]:not(:checked) + label
{
color: black;
font-weight: bold;
}
.steps input[type="checkbox"]:not(:checked) ~ input[type="checkbox"] + label
{
color: #777;
font-weight: normal;
}
.step
{
display: inline-block;
width: 35em;
}
</style>
</head>
<body>
<div class="steps">
<input type="checkbox">
<label class="step" for="">Create an immutable cache class</label>
<input type="checkbox">
<label class="step" for="">Use the cache in a naive/straightforward way</label>
<input type="checkbox">
<label class="step" for="">Hide the passing of state (non-monadic)</label>
<input type="checkbox">
<label class="step" for="">Simplify by using monadic methods</label>
<input type="checkbox">
<label class="step" for="">Incorporate state into the original return type</label>
</div>
</body>
</html>
I need to have space between the first label and the inline radio button group as in the following image:
Example, space between I'm overweight or obese and Yes, No buttons etc and i need to have a horizontal line at bottom as in image. I tried the following:
<form class="j-forms" novalidate>
<div class="unit">
<div class="inline-group">
<label style="margin-right: 20px !important;">I'm overweight or obese
<label class="radio">
<input type="radio" name="i-radio">
<i></i>
Yes
</label>
<label class="radio">
<input type="radio" name="i-radio">
<i></i>
No
</label>
<label class="radio">
<input type="radio" name="i-radio">
<i></i>
Don't know
</label>
</label>
</div>
</div>
</form>
But the following css is not providing the space:
<label style="margin-right: 20px !important;">I'm overweight or obese
I tried right-padding too without any effect. How can i add space, the horizontal lines at bottom and multiple rows of buttons as in the image.
Soliciting help from CSS experts.
Your style margin-right: 20px is working the problem is you are putting the radio buttons inside that label only. So it is taking margin from the right side of the screen. Close the label tag before label with class radio and for the horizontal line, you can simply use hr tag.
<form class="j-forms" novalidate>
<div class="unit">
<div class="inline-group">
<label style="margin-right: 60px !important;">I'm overweight or obese</label>
<label class="radio">
<input type="radio" name="i-radio">
<i></i>
Yes
</label>
<label class="radio">
<input type="radio" name="i-radio">
<i></i>
No
</label>
<label class="radio">
<input type="radio" name="i-radio">
<i></i>
Don't know
</label>
<hr>
</div>
<div class="inline-group">
<label style="margin-right: 98px">I smoke cigarettes</label>
<label class="radio">
<input type="radio" name="i-radio">
<i></i>
Yes
</label>
<label class="radio">
<input type="radio" name="i-radio">
<i></i>
No
</label>
<label class="radio">
<input type="radio" name="i-radio">
<i></i>
Don't know
</label>
<hr>
</div>
</div>
</form>
This is my HTML code. I want to hide the radio button using CSS, but when I press F5 it doesn't work.
#ud_tab input[type=radio]{
display: none;
}
<div id="ud_tab">
<input type="radio" name="ud_tabs" id="tab1" checked="">
<label for="tab1">Headline 1</label>
<input type="radio" name="ud_tabs" id="tab2">
<label for="tab2">Headline 2</label>
<input type="radio" name="ud_tabs" id="tab3">
<label for="tab3">Headline 3</label>
</div>
You need to add double quotes to the attribute selector. Change input[type=radio] to input[type="radio"]:
#ud_tab input[type="radio"] {
display: none;
}
<div id="ud_tab">
<input type="radio" name="ud_tabs" id="tab1" checked="">
<label for="tab1">Headline 1</label>
<input type="radio" name="ud_tabs" id="tab2">
<label for="tab2">Headline 2</label>
<input type="radio" name="ud_tabs" id="tab3">
<label for="tab3">Headline 3</label>
</div>
Preview:
I am trying to do this in css:
The margin between each element is 10px
The textarea height is 100px and the width is 150px
This is some of my html code for reference:
main form label {
margin: 10px;
}
textarea {
height: 100px;
width: 150px;
}
<main>
<h2>Contact Us</h2>
<form action="#" method="post">
<label>
First name:
<input type="text" name="firstname">
</label>
<label>
Last name:
<input type="text" name="lastname">
</label>
<label>
Email:
<input type="text" name="email">
</label>
<label>
Select Your State:
<select>
<option value="florida">Florida</option>
<option value="california">California</option>
<option value="michigan" selected="selected">Michigan</option>
<option value="new york">New York</option>
<option value="texas">Texas</option>
</select>
</label>
<label>
Male
<input type="radio" name="gender" value="male">
</label>
<label>
Female
<input type="radio" name="gender" value="female">
</label>
<label>
Comment:
<textarea name="comment" id="comment"></textarea>
</label>
<input type='submit' value='Submit' />
</form>
</main>
I am not sure why it isnt working. I have done regular margins before. I just don't know how to make margins between ALL elements.
Inline elements ignore vertical margin. Use inline-block.
main form label {
display: inline-block;
margin: 10px;
}
textarea {
height: 100px;
width: 150px;
}
<main>
<h2>Contact Us</h2>
<form action="#" method="post">
<label>
First name:
<input type="text" name="firstname">
</label>
<label>
Last name:
<input type="text" name="lastname">
</label>
<label>
Email:
<input type="text" name="email">
</label>
<label>
Select Your State:
<select>
<option value="florida">Florida</option>
<option value="california">California</option>
<option value="michigan" selected="selected">Michigan</option>
<option value="new york">New York</option>
<option value="texas">Texas</option>
</select>
</label>
<label>
Male
<input type="radio" name="gender" value="male">
</label>
<label>
Female
<input type="radio" name="gender" value="female">
</label>
<label>
Comment:
<textarea name="comment" id="comment"></textarea>
</label>
<input type='submit' value='Submit' />
</form>
</main>
Try to set the label to display: block; or display: inline-block;.
main form label {
display: block;
margin: 10px;
}
Labels are displayed inline by default and therefore the margin value does not apply as you probably expect. Maybe this helps you to understand the issue: http://maxdesign.com.au/articles/inline/
I'm trying to use the toggle feature in Bootstrap, but would like to replace the default buttons with an image. The image has text that reads "This week". The button right next to it will be an image that reads "All Time". Any ideas on how to do this?
You can see the webpage laid out here:
http://matthewtbrown.com/test/imageasbutton/
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active thisweek">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
</label>
</div>
rightcolumn .btn-group .btn .btn-primary .active .thisweek {
background-image: url(../images/callout.png);
background-color: transparent;
}
you means you want images as a radio buttons yes?
hope, this helps:
<style>
/*input[type=radio] {
display: none;
}*/
</style>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active thisweek">
<input type="radio" name="options" id="option1" autocomplete="off" checked><img src="https://placehold.it/200x200">
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"><img src="https://placehold.it/150x150">
</label>
Uncomment style to hide radio buttons graphics :)