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>
Related
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>
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/
What is the most elegant (ie. non-hacky) way to properly align a group of checkboxes, one or more of which have associated text inputs? Whatever I have tried, I end up with (i) unevenly spaced checkboxes, or (ii) misaligned checkboxes, or (iii) misaligned labels, or (iv) misaligned text boxes.
Since the use case of:
What is your favourite food?
(a) Apple
(b) Banana
(c) Carrot
(d) Other: _______
is surely very common, I wonder whether anyone has found a way to do this with Bootstrap standard classes, before I start forcing my own classes into the code.
Here is the code I have now:
<div class="form-group">
<label class="col-sm-2 control-label">
Favourite food
</label>
<div class="col-sm-10">
<div class="checkbox">
<label>
<fieldset class="form-inline">
<input type="checkbox"/>
Apple
</fieldset>
</label>
</div>
<div class="checkbox">
<label>
<fieldset class="form-inline">
<input type="checkbox"/>
Banana
</fieldset>
</label>
</div>
<div class="checkbox">
<label>
<fieldset class="form-inline">
<input type="checkbox"/>
Other <input type="email" placeholder="someone#somewhere.com" class="form-control"/>
</fieldset>
</label>
</div>
<div class="checkbox">
<label>
<fieldset class="form-inline">
<input type="checkbox"/> Any fruit from one of these colour groups: Red, Green, Blue
</fieldset>
</label>
</div>
</div>
</div>
Screenshot attached showing output in Chrome:
The fourth checkbox is too far from the third, while the text and 'input type=text' on the third line are too low.
Yes, there is a simple bootstrap way, just change the code of the checkbox to this:
<div class="checkbox">
<div class="form-inline">
<label>
<input type="checkbox"/>
Other
</label>
<input type="email" placeholder="someone#somewhere.com" class="form-control"/>
</div>
</div>
Working Example
Here's one way to achieve what you're trying to do. The only change which I've made to your HTML structure is that I've wrapped the description for each checkbox inside a <span> tag and added used this CSS:
input[type="checkbox"] {
position: relative !important;
display: inline-block;
vertical-align: text-bottom;
}
span {
display: inline-block;
vertical-align: middle;
}
Here's a working demo:
input[type="checkbox"] {
position: relative !important;
display: inline-block;
vertical-align: text-bottom;
}
span {
display: inline-block;
vertical-align: middle;
}
.form-inline .form-control {
padding-top: 0px;
padding-bottom: 0px;
height: 20px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
<label class="col-sm-2 control-label">Favourite food</label>
<div class="col-sm-10">
<div class="checkbox">
<label>
<fieldset class="form-inline">
<input type="checkbox" /> <span>Apple</span>
</fieldset>
</label>
</div>
<div class="checkbox">
<label>
<fieldset class="form-inline">
<input type="checkbox" /> <span>Banana</span>
</fieldset>
</label>
</div>
<div class="checkbox">
<label>
<fieldset class="form-inline">
<input type="checkbox" /> <span>Other</span>
<input type="email" placeholder="someone#somewhere.com" class="form-control" />
</fieldset>
</label>
</div>
<div class="checkbox">
<label>
<fieldset class="form-inline">
<input type="checkbox" /> <span>Any fruit from one of these colour groups: Red, Green, Blue</span>
</fieldset>
</label>
</div>
</div>
</div>
I have a Bootstrap form with some inline radio buttons and a label. I'd like to keep the label on the same line as the buttons, but I can't seem to make that happen. Here's my approach:
<form>
<div class="control-group">
<label class="control-label">Some label</label>
<div class="controls">
<label class="radio inline">
<input type="radio" value="1"/>
First
</label>
<label class="radio inline">
<input type="radio" value="2"/>
Second
</label>
</div>
</div>
</form>
Fiddle: http://jsfiddle.net/GaDbZ/2/
I also tried this:
<form>
<div class="form-inline">
<label class="control-label">Some label</label>
<label class="radio">
<input type="radio" value="1"/>
First
</label>
<label class="radio">
<input type="radio" value="2"/>
Second
</label>
</div>
</form>
But everything is smooshed together. Fiddle: http://jsfiddle.net/GaDbZ/3/
How can I get the horizontal spacing from the first one combined with the vertical spacing of the second?
Also, I should note that in real life, I have a bunch of other stuff going on in the form, so I don't want to use form-horizontal because it creates funky margins that don't jive with the other stuff I have in there.
If you add the 'radio inline' class to the control label in the solution provided by user1938475 it should line up correctly with the other labels. Or if you're only using 'radio' like your 2nd example just include the 'radio' class.
<label class="radio control-label">Some label</label>
OR for 'radio inline'
<label class="radio-inline control-label">Some label</label>
Since Bootstrap 3 you have to use checkbox-inline and radio-inline classes on the label.
This takes care of vertical alignment.
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
This may work for you, Please try this.
<form>
<div class="form-inline">
<div class="controls-row">
<label class="control-label">Some label</label>
<label class="radio inline">
<input type="radio" value="1" />First
</label>
<label class="radio inline">
<input type="radio" value="2" />Second
</label>
</div>
</div>
</form>
This is all nicely lined up including the field label. Lining up the field label was the tricky part.
HTML Code:
<div class="form-group">
<label class="control-label col-md-5">Create a</label>
<div class="col-md-7">
<label class="radio-inline control-label">
<input checked="checked" id="TaskLog_TaskTypeId" name="TaskLog.TaskTypeId" type="radio" value="2"> Task
</label>
<label class="radio-inline control-label">
<input id="TaskLog_TaskTypeId" name="TaskLog.TaskTypeId" type="radio" value="1"> Note
</label>
</div>
</div>
CSHTML / Razor Code:
<div class="form-group">
#Html.Label("Create a", htmlAttributes: new { #class = "control-label col-md-5" })
<div class="col-md-7">
<label class="radio-inline control-label">
#Html.RadioButtonFor(model => model.TaskTypeId, Model.TaskTaskTypeId) Task
</label>
<label class="radio-inline control-label">
#Html.RadioButtonFor(model => model.TaskTypeId, Model.NoteTaskTypeId) Note
</label>
</div>
</div>
In Bootstrap 4 you can use the form-check-inline class.
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="queryFieldName" id="option1" value="1">
<label class="form-check-label" for="option1">First</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="queryFieldName" id="option2" value="2">
<label class="form-check-label" for="option2">Second</label>
</div>
Key insights for me were:
- ensure that label content comes after the input-radio field
- I tweaked my css to make everything a little closer
.radio-inline+.radio-inline {
margin-left: 5px;
}
Best is to just Apply margin-top: 2px on the input element.
Bootstrap adds a margin-top: 4px to input element causing radio button to move down than the content.