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;
}
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 a Vue app with a HTML Form with multiple sets of radio buttons.
I customized their appearance using the SO answer written here
However, when I click on any of the radio buttons, only the first set of radio buttons are affected, even when clicking a different set's radio button.
This is the html and css (JSFiddle link)
Any idea why this is happening?
Update: The problem was with the label tags - their for attribute was still set to the first set of radio buttons!
<div class="time_input" >
<div class="time_input__radio_group">
<div class="radio_group">
<input type="radio" name="start" id="am" :value="true" v-model="startInMorning">
<label class="radio_label" for="am">AM</label>
</div>
<div class="radio_group">
<input type="radio" name="start" id="pm" :value="false" v-model="startInMorning">
<label class="radio_label" for="pm">PM</label>
</div>
</div>
</div>
<div class="days_open_input">
<div class="radio_group" >
<input type="radio" name="days_open" id="one_day" :value="1" v-model="days_open" checked>
<label class="radio_label" for="am">1</label>
</div>
<div class="radio_group">
<input type="radio" name="days_open" id="two_days" :value="2" v-model="days_open">
<label class="radio_label" for="pm">2</label>
</div>
<div class="radio_group">
<input type="radio" name="days_open" id="three_days" :value="3" v-model="days_open">
<label class="radio_label" for="pm">3</label>
</div>
</div>
<div class="tracks_limit_input">
<div class="radio_group">
<input type="radio" name="tracks_limit" id="eight_songs" value="8" v-model="tracks_limit" >
<label class="radio_label " for="am">8</label>
</div>
<div class="radio_group">
<input type="radio" name="tracks_limit" id="sixteen_songs" value="16" v-model="tracks_limit" checked class="tracks_limit_input__margin">
<label class="radio_label" for="pm">16</label>
</div>
</div>
/* completely hiding radio button */
input[type="radio"] {
display: none;
}
/* simulate radiobutton appearance using pseudoselector */
input[type="radio"] + *::before {
content: "";
/* create custom radiobutton appearance */
display: inline-block;
width: 15px;
height: 15px;
padding: 3px;
margin-right: 5px;
/* background-color only for content */
background-clip: content-box;
border: 1px solid #bbbbbb;
background-color: #e7e6e7;
border-radius: 50%;
}
/* appearance of checked radiobutton */
input[type="radio"]:checked + label::before {
background-color: black;
}
/* resetting default box-sizing */
*,
*:before,
*:after {
box-sizing: border-box;
}
/* optional styles for centering radiobuttons */
.radio-group label {
display: inline-flex;
align-items: center;
}
I think there is no mistake with the css
The code you are using for the HTML is the one causes problem:
1st it is Vue code not pure HTML code
I will take the 1st group - the time example:
<div class="time_input" >
<div class="time_input__radio_group">
<div class="radio_group">
<input type="radio" name="start" id="am" :value="true" v-model="startInMorning">
<label class="radio_label" for="am">AM</label>
</div>
<div class="radio_group">
<input type="radio" name="start" id="pm" :value="false" v-model="startInMorning">
<label class="radio_label" for="pm">PM</label>
</div>
</div>
</div>
Both of inputs is set to the same model startInMorning so if it is true both checked and vice versa.
So the fix is:
first remove the v-model="startInMorning" for both
next change the :value
for the first one :value="startInMorning",
for the second one :value="!startInMorning"
Do similar for others
The problem seemed to be with the HTML!
The for attribute on the label tags was set to the wrong radio buttons
ie
<input type="radio" name="days_open" id="two_days" :value="2" v-model="days_open">
<label class="radio_label" for="pm">2</label>
<input type="radio" name="days_open" id="two_days" :value="2" v-model="days_open">
<label class="radio_label" for="pm">2</label>
Basically, I am trying to create my own radio button component for react and reuse over again, but I am struggling to get the buttons to work correctly with the styling. If you select a button in the second set it doesn't react properly even though each set has a different name property. If I get rid of the custom style it works fine.
I think it has something to do with this, but haven't found a solution:
.radio-custom {
opacity: 0;
position: absolute;
}
Here is my codepen:
https://codepen.io/Sbphillips19/pen/XLyzzN
HTML:
<form>
<h2>Radio Button Prompt 1</h2>
<div>
<input id="radio-1" class="radio-custom" name="radio-group" type="radio">
<label for="radio-1" class="radio-custom-label">First Choice</label>
</div>
<div>
<input id="radio-2" class="radio-custom"name="radio-group" type="radio">
<label for="radio-2" class="radio-custom-label">Second Choice</label>
</div>
<div>
<input id="radio-3" class="radio-custom" name="radio-group" type="radio">
<label for="radio-3" class="radio-custom-label">Third Choice</label>
</div>
</div>
<h2>Radio Button Prompt 2</h2>
<div>
<input id="radio-1" class="radio-custom" name="radio-group-2" type="radio">
<label for="radio-1" class="radio-custom-label">First Choice</label>
</div>
<div>
<input id="radio-2" class="radio-custom"name="radio-group-2" type="radio">
<label for="radio-2" class="radio-custom-label">Second Choice</label>
</div>
<div>
<input id="radio-3" class="radio-custom" name="radio-group-2" type="radio">
<label for="radio-3" class="radio-custom-label">Third Choice</label>
</div>
</div>
</form>
and CSS:
.radio-custom {
opacity: 0;
position: absolute;
}
.radio-custom, .radio-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-custom-label, .radio-custom-label {
position: relative;
}
.radio-custom + .radio-custom-label:before {
content: '';
background: white;
border: 2px solid #888888;
display: inline-block;
vertical-align: middle;
width: 44px;
height: 44px;
padding: 2px;
margin-right: 10px;
text-align: center;
border-radius: 50%;
}
.radio-custom:checked + .radio-custom-label:before {
background: #444444;
box-shadow: inset 0px 0px 0px 6px #fff;
}
The problem is with the attr id that should be unique!
Change the following second part of the html to this and it will work:
Working example:https://codepen.io/jo-o-teixeira-the-sasster/pen/agQErM
Radio Button Prompt 2
<div>
<input id="radio-4" class="radio-custom" name="radio-group-2" type="radio">
<label for="radio-4" class="radio-custom-label">First Choice</label>
</div>
<div>
<input id="radio-5" class="radio-custom"name="radio-group-2" type="radio">
<label for="radio-5" class="radio-custom-label">Second Choice</label>
</div>
<div>
<input id="radio-6" class="radio-custom" name="radio-group-2" type="radio">
<label for="radio-6" class="radio-custom-label">Third Choice</label>
</div>
</div>
Is there a pure CSS way to style a group of radio buttons such that they look a certain way when none of them are checked? This would be the default state (for legal reasons) of the radio buttons for a couple questions.
Overall, what I'm trying to do is have two conditions:
If none of the radio buttons are checked, show all three radio buttons in full color/opacity
If one of the radio buttons is checked, show that button in full color/opacity, but the other two slightly dulled/grayed.
It is easy to do condition #2 using the :checked selector. But that by itself will leave all three dulled/grayed in their default state. See the snippet for a very basic example.
I realize this can be done with javascript, and if I need to go that route I will. Just thought I'd see if there was a pure CSS way to accomplish it.
input[type=radio]:not(:checked),
input[type=radio]:not(:checked)+label {
opacity: 0.2;
}
<form>
<input type="radio" name="Question" value="Answer1" /> <label>Answer 1</label>
<input type="radio" name="Question" value="Answer2" /> <label>Answer 2</label>
<input type="radio" name="Question" value="Answer3" /> <label>Answer 3</label>
</form>
I think you could do this in JavaScript. Alone, I don't believe you could do this in CSS because what you need is for it to check if the radio-buttons are selected and you can't have that kind of logic in CSS.
Here is some code I have pulled together in JQuery (the easiest way to do it):
$(function() {
$("#radio1").click(function() {
$("#radio2Text, #radio3Text, #radio2, #radio3").css("opacity", "0.2");
$("#radio1, #radio1Text").css("opacity", "1");
});
$("#radio2").click(function() {
$("#radio1Text, #radio3Text, #radio1, #radio3").css("opacity", "0.2");
$("#radio2, #radio2Text").css("opacity", "1");
});
$("#radio3").click(function() {
$("#radio1Text, #radio2Text, #radio1, #radio2").css("opacity", "0.2");
$("#radio3, #radio3Text").css("opacity", "1");
});
});
#radio1Text, #radio2Text, #radio3Text {
opacity: 1;;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="radio" name="Question" value="Answer1" id = "radio1"> <label id = "radio1Text">Answer 1</label>
<input type="radio" name="Question" value="Answer2" id = "radio2"> <label id = "radio2Text">Answer 2</label>
<input type="radio" name="Question" value="Answer3" id = "radio3"> <label id = "radio3Text">Answer 3</label>
</form>
This isn't quite what you're looking for, because while this styling differentiates between checked and unchecked states, it does so not by opacity but by using different colours. Perhaps you can adapt it to suit your needs.
Hope it helps. here's a fiddle
[name=radio] {
display: none;
}
[for^=radio] {
display: inline-block;
vertical-align: top!important;
position: relative;
margin: 10px 15px 0px 15px;
width: 120px;
}
[for^=radio]:before {
display: inline-block;
content: '';
position: relative;
margin: 0px 5px -10px 5px;
width: 32px;
height: 32px;
background: red;
}
[type=radio]:checked + [for^=radio]:before {
background: green;
}
<input id=radio-1 type=radio name=radio />
<label for=radio-1>Answer 1</label>
<input id=radio-2 type=radio name=radio />
<label for=radio-2>Answer 2</label>
<input id=radio-3 type=radio name=radio />
<label for=radio-3>Answer 3</label>
I gave a try but I was only partially successful. This is not the correct answer, but it is in pure CSS.
input[type='radio']:not(:checked) + label
{
opacity:1;
}
input[type="radio"]:checked + label
{
opacity:1;
}
input[type="radio"]:checked ~ input[type="radio"] + label
{
opacity:0.5;
}
<form>
<div class="input-group">
<input type="radio" name="Question" value="Answer1" id="one" />
<label for="one">Answer 1</label>
<input type="radio" name="Question" value="Answer2" id="two" />
<label for="two">Answer 2</label>
<input type="radio" name="Question" value="Answer3" id="three" />
<label for="three">Answer 3</label>
</div>
</form>
A code pen of it is here.
Could anyone give new ideas how to realize the following? If it generally possible).
The content of Left panel will be changed dynamically with Angular. So, we can have several items or, for example, 50 items on the panel. In accordance with that, the height of panel will be shorter or overflow hidden will be displayed.
Here is fiddle draft https://jsfiddle.net/b9on9gup/7/
First of all the div class="filter-title" should fill 100% height.
The second, title container shouldn't be in scrolling area. Scroll should be inside div class="radio-container". You could add class .shown on
div class="main-container" to display bottom panel.
Additional condition is good displaying with and without scroll (different quantity of items, different screen resolutions etc).
in fiddle I was trying different ways, so some css properties can be odd.
<body>
<div class = "main-container">
<div class="left-panel">
<div class="filter-container">
<div class="table">
<div class="table-row">
<div class="radio-container">
<div class="overflow">
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm" />
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm" />
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm" />
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm" />
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
</div>
</div>
<div class="filter-title">
<span>
Filter title
</span>
</div>
</div>
</div>
</div>
</div>
<div class="bottom-panel"></div>
</div>
</body>
html, body {
height: 100%;
padding: 0;
position: relative;
margin: 0;
}
.main-container {
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
.left-panel {
top: 0;
left: 0;
bottom: 0;
width: 300px;
background: #fff;
position: absolute;
transition: bottom 0.5s ease;
.filter-container {
position: absolute;
background: #F6F6F6;
top: 50%;
transform: translateY(-50%);
width: 100%;
.table {
display: table;
width: 100%;
.table-row {
display: table-row;
height: 100%;
.radio-container {
display: table-cell;
padding: 25px 25px;
display: table-cell;
vertical-align: middle;
.overflow {
overflow-y: scroll;
max-height: 100%;
}
}
}
.filter-title {
display: table-cell;
width: 20px;
background: #539ACC;
vertical-align: middle;
span {
-webkit-writing-mode: vertical-lr;
white-space: nowrap;
}
}
}
}
}
.bottom-panel {
height: 200px;
position: absolute;
bottom: -200px;
background: #F6F6F1;
width: 80%;
left: 0;
right: 0;
margin: auto;
transition: bottom 0.5s ease;
}
&.shown {
.left-panel {
bottom: 200px;
}
.bottom-panel {
bottom: 0;
}
}
}
UPDATE
It's a simple piece of javascript that you can edit to better fill your needs...
it changes the title height if necessary (it actually changes the element's width since the it's rotated 90deg)
var ftitle = document.querySelector('.filter-title');
var radiocont = document.querySelector('.radio-container');
var w = ftitle.clientWidth;
var h = radiocont.clientHeight;
if (h > w) { ftitle.style.width = h + 'px';}
.left-panel {
position: relative;
width: 150px;
}
/*
.radio-container {
height: 100px;
overflow: auto;
}
*/
.radio-container label {
display: block;
}
.filter-title {
background: #ddd;
text-align: center;
position: absolute;
top: 0; left: 0;
transform: translateX(170px) rotate(90deg);
transform-origin: 0 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class = "main-container">
<div class="left-panel">
<div class="radio-container">
<label>
<input type="radio" name="filterFieldsForm"/>
radio button1
</label>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button2
</label>
<label>
<input type="radio" name="filterFieldsForm" />
radio button3
</label>
<label>
<input type="radio" name="filterFieldsForm" />
radio button4
</label>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button5
</label>
<label>
<input type="radio" name="filterFieldsForm" />
radio button6
</label>
<label>
<input type="radio" name="filterFieldsForm" />
radio button7
</label>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button8
</label>
<label>
<input type="radio" name="filterFieldsForm" />
radio button9
</label>
<label>
<input type="radio" name="filterFieldsForm" />
radio button10
</label>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button11
</label>
<label>
<input type="radio" name="filterFieldsForm" />
radio button12
</label>
<label>
<input type="radio" name="filterFieldsForm" />
radio button13
</label>
<label>
<input type="radio" name="filterFieldsForm" />
radio button14
</label>
</div>
<div class="filter-title">
<span>Filter title</span>
</div>
</div>
</div>
</body>
</html>
http://jsbin.com/wiyuhu/edit?css,js,output
The best decision I've found in my case is using max-height for div class= "overflow" and media-queries min-height.
I noticed scroll is displayed if to set max-height for div class= "overflow". But max-height should be at least in 'px', not in '%'.
Also max-height should be different for different resolutions. I set some breakpoints for max-height using media queries. Something like this:
#media(min-height:520px) {
max-height: 170px;
}
#media(min-height:600px) {
max-height: 250px;
}
#media(min-height:768px) {
max-height: 400px;
}
#media(min-height:900px) {
max-height: 500px;
}
.....
It allows me having panel's height shorter than browser view's height in any resolutions and having or not having scroll inside panel (depends on quantity of items)
The same approach is applied to filter title + text-overflow
Here is video - http://take.ms/WBDcy
and here is code - http://plnkr.co/edit/SbMa9Ece2eOPJ2C0Lt5U?p=preview
When I was writing this post I've understood that using of max-height: 80vh maybe was even better than media queries. It should be tested.