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:
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>
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>
Can anyone please shed some light on how to format Radio Buttons in Bootstraps form-group?
It gets into problem if there are too many radios control and wrap around to the next line. The bootstrap control box will not expend to fit everything.
Attached sample below which had been simplified for illustration purposes.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group has-feedback">
<label class="control-label" for="mRadio">Radio Test</label>
<div id="mRadio" class="form-control">
<label class="radio-inline">
<input type="radio" name="optradio">Option 1</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 2</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 3</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 4</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 5</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 6</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 7</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 8</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 9</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 10</label>
</div>
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
Add this css to overwrite the height set by bootstrap
.form-control {height: auto;}
I'm using bootstrap CSS and i have a form that use radio button , it works in Chrome
and when i use Firefox the labels and the button collapses.
Here is the code
<form class="form-horizontal" method="post" action="registerResult.php">
<fieldset>
<div class="control-group">
<label class="control-label">Gender :</label>
<label class="radio">
<div class="controls"><input type="radio" name="sexe" id="optionsRadios1" value="male" checked></div>
Male
</label>
<label class="radio">
<div class="controls"><input type="radio" name="sexe" id="optionsRadios1" value="female" checked></div>
Female
</label>
</div>
</fieldset>
</form>
Here is the screenshot :
Check this:
<div class="control-group">
<label class="control-label">Gender:</label>
<div class="controls">
<label class="radio">
<input type="radio" name="Gender" value="Male"> Male
</label>
<label class="radio">
<input type="radio" name="Gender" value="Female"> Female
</label>
<label class="radio">
<input type="radio" name="Gender" value="Other"> Other
</label>
</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.