Radio Button Method - HTML Accordion - html

I would like some assistance with my accordion code,
My idea is to get something like this:
The Radio Button Method adds a hidden radio input and a label tag to each accordion tab.
The logic is straightforward:
when a user selects a tab, they essentially check the radio button associated with that tab.
when a user clicks the next tab in the accordion, the next radio button is selected, and so on.
Only one tab can be open at a time using this method.
I'd like some advice on how to incorporate this into my current accordion code.
<!doctype html>
<html>
<head>
<style>
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #6AAB95;
border-radius: 3px;
color: #FFF;
transition: ease .5s;
position: relative; /* ADDING THIS IS REQUIRED */
}
label:hover {
background: #4E8774;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked + label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #E2E5F6;
padding: 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 3px;
}
input + label + .collapse {
display: none;
}
input:checked + label + .collapse {
display: block;
}
</style>
</head>
<body>
<input type="checkbox" id="title1" />
<label for="title1">Accordion 1</label>
<div class="collapse">
<p>Your content goes here inside this division with the class "content".</p>
</div>
<input type="checkbox" id="title2" />
<label for="title2">Accordion 2</label>
<div class="collapse">
<p>Your content goes here inside this division with the class "content".</p>
</div>
</body>
</html>


No need to change the CSS (at least the part handling the accordion functionality) but you'd have to change a bit in your HTML.
To get the desired accordion effect where only one tab can be open at a time you should:
use radio buttons instead of checkboxes (input[type="radio"]).
And the important part is to give those radio buttons the same name (the attribute name must be the same for all the accordion component's radio buttons) in order to achieve the desired outcome.
Here's a a live demo:
/** nothing changed on the CSS part, see the HTML part for the required changes */
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #6AAB95;
border-radius: 3px;
color: #FFF;
transition: ease .5s;
position: relative;
/* ADDING THIS IS REQUIRED */
}
label:hover {
background: #4E8774;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked+label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #E2E5F6;
padding: 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 3px;
}
input+label+.collapse {
display: none;
}
input:checked+label+.collapse {
display: block;
}
<!-- changed "type=checkbox" to "type=radio" -->
<!-- added the same "name" attribute value for all the radio buttons -->
<input type="radio" name="radio-btn" id="title1" />
<label for="title1">Accordion 1</label>
<div class="collapse">
<p>Your content goes here inside this division with the class "content".</p>
</div>
<!-- changed "type=checkbox" to "type=radio" -->
<!-- added the same "name" attribute value for all the radio buttons -->
<input type="radio" name="radio-btn" id="title2" />
<label for="title2">Accordion 2</label>
<div class="collapse">
<p>Your content goes here inside this division with the class "content".</p>
</div>
CAUTION: Even though the radio buttons hack works as needed, there is no way you can close all the accordion items after interacting for the first time (you can have a closed accordion initially though).


I have found this example using Sass that looks exactly like what you need: https://codepen.io/alvarotrigo/pen/dyJbqpd.
The example uses radio buttons, such as <input type="radio" id="title1" name="select"/>. Because they have the same name, you can only select one at a time.
In your example, you have checkboxes like in this example at w3schools.com. Using checkboxes, you can tick any number of checkboxes at a time, therefore the current accordion behavior.
Here's a stripped-down version (converted to CSS):
input {
position: absolute;
opacity: 0;
z-index: -1;
}
.tab {
overflow: hidden;
}
.tab-label {
display: flex;
justify-content: space-between;
padding: 1em;
background: #2c3e50;
color: white;
cursor: pointer;
}
.tab-content {
max-height: 0;
padding: 0 1em;
color: #2c3e50;
background: white;
}
input:checked ~ .tab-content {
max-height: 100vh;
padding: 1em;
}
<div class="tab">
<input type="radio" id="rd1" name="rd">
<label class="tab-label" for="rd1">Item 1</label>
<div class="tab-content">Content</div>
</div>
<div class="tab">
<input type="radio" id="rd2" name="rd">
<label class="tab-label" for="rd2">Item 2</label>
<div class="tab-content">Content</div>
</div>
I have slightly changed your code and added another div with overflow: hidden:
/** nothing changed on the CSS part, see the HTML part for the required changes */
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #6AAB95;
border-radius: 3px;
color: #FFF;
transition: ease .5s;
position: relative;
/* ADDING THIS IS REQUIRED */
}
label:hover {
background: #4E8774;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked+label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #E2E5F6;
padding: 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 3px;
}
input+label+.collapse {
display: none;
}
input:checked+label+.collapse {
display: block;
}
<div class="tab">
<input type="radio" id="title1" name="select"/>
<label for="title1">Accordion 1</label>
<div class="collapse">
Your content goes here inside this division with the class "content".
</div>
</div>
<div class="tab">
<input type="radio" id="title2" name="select" />
<label for="title2">Accordion 2</label>
<div class="collapse">
Your content goes here inside this division with the class "content".
</div>
</div>

Related

How to change brightness in radio buttons using CSS in jQuery mobile

I am trying to lower the brightness(when off) of an existing radio button from jQuery mobile using CSS. I have tried the following in my html file -
<style>
.ui-grid-b .ui-block-b: flip-select.label{
text-indent: 60%;
}
#flip-select{
text-indent: 60%;
}
#radio-choice-h-2a:true{
filter:brightness(50%);
}
.ui-radio .ui-btn.ui-radio-off:after {
filter: brightness(50%);
}
</style>
This is the html part for the radio from jQuery mobile 1.4.5 demos -
<div class="ui-grid-b">
<div class="ui-block-a"><!--row 1 block a-->
<!--radio button 1-->
<fieldset id="radio-choice-h-2" data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<legend>NLED</legend>
<input name="radio-choice-h-2" id="radio-choice-h-2a" value="on" checked="checked" type="radio">
<label style="background-color: #ff0000" for="radio-choice-h-2a">ON</label>
I see no changes after I put the CSS internal style element in. Am I doing something wrong? I have noticed similar posts. But I want to make changes to an existing radio button
This is for running a webpage on touchscreens.

Try this code: If you want to decrease the brightness or change the color of the radio button the you can easily change the background color.
.ui-grid-b{
margin: 10px;
}
fieldset {
position: relative;
padding-left: 24px;
margin-bottom: 12px;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin-right: 40px;
}
fieldset input {
position: absolute;
opacity: 0;
cursor: pointer;
}
label:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 4px;
height: 15px;
width: 15px;
border: 1px solid #383838;
border-radius: 50%;
}
label:before {
content: "";
position: absolute;
display: none;
}
fieldset input:checked + label:before {
display: block;
}
fieldset label:before {
top: 56%;
left: 7px;
width: 11px;
display: none;
height: 11px;
border-radius: 50%;
background: #d61722;
}
<div class="ui-grid-b">
<div class="ui-block-a"><!--row 1 block a-->
<!--radio button 1-->
<fieldset id="radio-choice-h-2" data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<legend>NLED</legend>
<input name="radio-choice-h-2" id="radio-choice-h-2a" value="on" checked="checked" type="radio">
<label style="background-color: #ff0000" for="radio-choice-h-2a">ON</label>
</fieldset>
</div>
</div>

How to instigate action when input is checked in SCSS?

Its very simply and I have looked at all these examples but still am not able to figure out what I am doing wrong!
I have created a custom checkbox, increased the size and style, and when it is clicked I want the letter "A" to appear in the box, but it simply will not respond, maybe a second pair of eyes will help me identify the problem.
below is my html and css:
.container {
position: relative;
cursor: pointer;
display: block;
input,
label {
display: inline-block;
}
input {
// opacity: 0;
position: absolute;
height: unset;
width: unset;
cursor: pointer;
}
label::before {
border: 1px solid #333;
content: "";
display: inline-block;
font: 16px/1em sans-serif;
height: 50px;
margin: 0 .25em 0 0;
padding: 0;
vertical-align: top;
width: 50px;
border-radius: 5px;
color: red;
font-size: 50px;
padding: 10px;
}
input[type="checkbox"]:checked + label::before {
content: "A"; //code for checked
}
}
<div class="container">
<div>
<label for="form_agreeTerms" class="required">Agree terms</label>
<input type="checkbox" id="form_agreeTerms" name="form[agreeTerms]" required="required" value="1">
</div>
</div>
Here it is in codepen

You using the + operator, which means "The next sibling element".
You must move the label to be after the checkbox.
<div class="container">
<div>
<input type="checkbox" id="form_agreeTerms" name="form[agreeTerms]" required="required" value="1">
<label for="form_agreeTerms" class="required">Agree terms</label>
</div>
</div>

CSS Radio-button and text outline

I'm having a problem with setting up box & shadow around my radio button. My CSS sets box only around radio button and shows nasty white square box around it. How to set border or outline around whole Radio-button + text to make selection more distinctive.
enrgy-form {
width: 50%;
float: right;
}
.label-width {
margin-left: 22px;
white-space: nowrap;
}
.label-nowrapp {
white-space: nowrap;
}
.selected-item input:checked {
/*border: 1px solid dodgerblue;*/
box-shadow: 3px 3px 11px 1px dodgerblue;
}
<div class="form-check enrgy-form">
<label class="form-check-label label-nowrapp selected-item">
<input class="form-check-input selected-item" type="radio" name="energy" formControlName="energy" value="Energy" (change)="setOptions()">Fuel-fired</label>
</div>

I think your best bet is to simulate the radio button with css so you can have the behavior you want.
You should first set the input to display: none and give it an id in your HTML so you can link it with the label, by giving the label a for attribute, this way you can control the check/uncheck of your radio button from the label.
Next you want to simulate the appearance of the radio button, i'll do this by adding two spans, one inside the other, so we can have a checked/unchecked status.
try this:
enrgy-form {
width: 50%;
float: right;
}
.label-width {
margin-left: 22px;
white-space: nowrap;
}
.label-nowrapp {
white-space: nowrap;
}
.selected-item {
display: none;
}
.selected-item:checked + label {
box-shadow: 0px 0px 11px 2px dodgerblue;
}
label{
padding: 3px;
}
label .bullet{
border-radius: 50%;
border: 1px solid gray;
background-color: lightgray;
margin-right: 3px;
display: inline-block;
width: 10px;
height: 10px;
position: relative;
}
.selected-item:checked + label .bullet .bullet-selected{
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
display: inline-block;
width: 5px;
height: 5px;
background-color: gray;
}
<div class="form-check enrgy-form">
<input class="form-check-input selected-item" type="radio" name="energy" formControlName="energy" value="Energy" (change)="setOptions()" id="someUniqueId"/>
<label class="form-check-label label-nowrapp" for="someUniqueId">
<span class="bullet">
<span class="bullet-selected"></span>
</span>
Fuel-fired
</label>
</div>

You could go the route where you style the whole radio button using :before and :after in CSS. That way you could even go nuts with animations and stuff...
It would require you to change the HTML a bit as well....
There's plenty of examples to be found if you search for "css custom radio".
[type="radio"]{
position: absolute;
left: -9999px;
}
[type="radio"] + label
{
position: relative;
padding: 0 20px;
cursor: pointer;
}
[type="radio"] + label:before{
content: '';
position: absolute;
left: 0;
top: 0;
width: 14px;
height: 14px;
border: 1px solid #ddd;
border-radius: 100%;
background: #fff;
}
[type="radio"]:checked + label:before{
box-shadow: 0px 1px 11px 1px dodgerblue;
}
[type="radio"] + label:after{
content: '';
display: none;
width: 10px;
height: 10px;
background: gray;
position: absolute;
top: 3px;
left: 3px;
border-radius: 100%;
}
[type="radio"]:checked + label:after {
display: block;
}
<div class="form-check enrgy-form">
<input type="radio" name="energy" id="one">
<label for="one">Fuel-fired</label>
</input>
<input type="radio" name="energy" id="two">
<label for="two">Something else</label>
</input>
</div>

Update
Here is a possible solution, you could modify it as you want!
.form-check {
position: relative;
display: inline-flex;
align-items: center;
font-size: 1rem;
}
.form-check-label {
font-size: 0.9em;
margin-right: 0.25em;
white-space: nowrap;
}
.form-check-input {
margin: 0;
margin-right: 0.5em;
}
.form-check-input:checked + .form-check-label:after {
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
border-radius: 1.5em 8px 8px 1.5em;
box-shadow: 3px 3px 11px 1px dodgerblue;
}
.medium { font-size: 2rem; }
.medium input[type=radio] { zoom: 2 }
.big { font-size: 3rem; }
.big input[type=radio] { zoom: 3 }
<div class="form-check">
<input id="inputcheck" class="form-check-input" type="radio" name="energy" formControlName="energy" value="Energy">
<label for="inputcheck" class="form-check-label">Fuel-fired normal</label>
</div>
<br><br>
<div class="form-check medium">
<input id="inputcheck1" class="form-check-input" type="radio" name="energy" formControlName="energy" value="Energy">
<label for="inputcheck1" class="form-check-label">Fuel-fired medium</label>
</div>
<br><br>
<div class="form-check big">
<input id="inputcheck2" class="form-check-input" type="radio" name="energy" formControlName="energy" value="Energy">
<label for="inputcheck2" class="form-check-label">Fuel-fired big</label>
</div>

New to CSS and coding. Organizing radio buttons and divs for a beginner gallery

So the issue I can't seem to solve is how to move the obscured divs under the radio+label buttons.
My Html
My CSS
/*color palette: abls
[lightest to darkest]
#eeeeee
#eaffc4
#b6c399
#6a856a
#333333
*/
body {
background-color: #333333;
font-family: monospace;
display: flex;
justify-content: center;
}
div {
/*background-color: red;*/
width: 100%;
height: 100%;
justify-content: center;
}
/*aesthetics for header*/
.Ghead {
font-size: 250%;
color: #eeeeee;
font-weight: lighter;
text-align: center;
border-color: red;
}
/*color for the 3 lines*/
hr:nth-child(1) {
border-color: #eaffc4;
max-width: 20%;
}
hr:nth-child(2) {
border-color: #b6c399;
max-width: 25%;
}
hr:nth-child(3) {
border-color: #6a856a;
max-width: 30%;
}
/*style for radio button container*/
.mGalD {
position: relative;
/*background-color: blue;*/
display: flex;
}
input[type=radio] {
display:none;
}
/*handles aesthetics of active buttons*/
label {
padding: 5px 7px;
border-radius: 5px;
display: inline-block;
font-size: 14px;
color: #6a856a;
}
input:checked + label {
background-color: #eaffc4;
}
/*handles the appearance of active divs in the display area*/
label + div {
position: relative;
color: red;
border: 2pt solid #eaffc4;
border-radius: 5px;
margin: 5px 0 0 0;
display: none;
max-width: 50%;
}
input:checked + label + div {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="./NewbTests.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" type="image/png" href="./Assets/SumisoulLogo.png">
<title>Viewport</title>
</head>
<body>
<div>
<h1>
<!--title and aesthetics for the head of the page-->
<div class="Ghead">
Viewport
<hr>
<hr>
<hr>
</div>
</h1>
<!--Labeled Radio buttons which activate css to reveal divs-->
<div class="mGalD">
<input type="radio" name="gal" id="g1" value="1">
<label for="g1">gallery 1</label><div>one</div>
<input type="radio" name="gal" id="g2" value="2">
<label for="g2">gallery 2</label><div>two</div>
<input type="radio" name="gal" id="g3" value="3">
<label for="g3">gallery 3</label><div>three</div>
</div>
</div>
</body>
</html>
I would have linked a few images to illustrate what is happening but I'm limited in links.
In essence;
Before:
(button 1)(button 2)(button 3)
Upon clicking any button:
(button 1)[_______________________] (button 2)(button 3)
The div shows up on the side of the corresponding button.
I don't really know what to do to have it align in a column without separating all of the divs and breaking the inline style of the buttons

Hope this works
body, html {
padding: 0;
margin: 0;
}
body {
background: linear-gradient(top left, red, orange);
}
span {
display: none;
position: absolute;
max-width: 450px;
left: 17px;
top: 48px;
padding: 3px;
min-height: 30px;
border-top: 1px solid #d3d3d3;
}
label {
cursor: pointer;
display: inline-block;
padding: 10px;
margin: 10px 0 0 0;
background: #e0e0e0;
color: black;
}
label:first-child {
margin-left: 10px;
}
input {
display: none;
}
input:checked + span {
display: initial;
}
h3 {
border-top: 1px solid;
padding-top: 5px;
position: absolute;
top: 150px;
left: 15px;
}
<label for="btn_one">Gallery 1</label>
<input type="radio" id="btn_one" name="nesto" checked="checked"/>
<span class="tab1">Gallery One</span>
<label for="btd_two">Gallery 2</label>
<input type="radio" id="btd_two" name="nesto"/>
<span class="tab2">Gallery two</span>
<label for="btd_tree">Gallery 3</label>
<input type="radio" id="btd_tree" name="nesto"/>
<span class="tab2">Gallery Three</span>

CSS ''background-color" attribute not working on checkbox inside <div>

The heading pretty much explains it. I have a couple of checkboxes inside a scrollable div. But for some reasons the 'background-color' attribute doesn't work. Although the 'margin-top' does seem to work...
Just puzzling me how one attribute can work and another not. It's also not like the div has it's own set of background color attributes that could potentially over ride the checkboxes attributes.
Anyways, below is my HTML (which is generated by JSP):
<div class="listContainer">
<input type="checkbox" class="oddRow">item1<br/>
<input type="checkbox" class="evenRow">item2<br/>
<input type="checkbox" class="oddRow">item3<br/>
<input type="checkbox" class="evenRow">item4<br/>
...
</div>
And here is my CSS:
.listContainer {
border:2px solid #ccc;
width:340px;
height: 225px;
overflow-y: scroll;
margin-top: 20px;
padding-left: 10px;
}
.oddRow {
margin-top: 5px;
background-color: #ffffff;
}
.evenRow{
margin-top: 5px;
background-color: #9FFF9D;
}

A checkbox does not have background color.
But to add the effect, you may wrap each checkbox with a div that has color:
<div class="evenRow">
<input type="checkbox" />
</div>
<div class="oddRow">
<input type="checkbox" />
</div>
<div class="evenRow">
<input type="checkbox" />
</div>
<div class="oddRow">
<input type="checkbox" />
</div>

In addition to the currently accepted answer: You can set border and background of a checkbox/radiobutton, but how it is rendered in the end depends on the browser. For example, if you set a red background on a checkbox
IE will show a red border instead
Opera will show a red background as intended
Firefox, Safari and Chrome will do nothing
This German language article compares a few browsers and explains at least the IE behavior. It maybe bit older (still including Netscape), but when you test around you'll notice that not much has changed. Another comparison can be found here.

You can use peseudo elements like this:
input[type=checkbox] {
width: 30px;
height: 30px;
margin-right: 8px;
cursor: pointer;
font-size: 27px;
}
input[type=checkbox]:after {
content: " ";
background-color: #9FFF9D;
display: inline-block;
visibility: visible;
}
input[type=checkbox]:checked:after {
content: "\2714";
}
<label>Checkbox label
<input type="checkbox">
</label>

After so much trouble i got it.
.purple_checkbox:after {
content: " ";
background-color: #5C2799;
display: inline-block;
visibility: visible;
}
.purple_checkbox:checked:after {
content: "\2714";
box-shadow: 0px 2px 4px rgba(155, 155, 155, 0.15);
border-radius: 3px;
height: 12px;
display: block;
width: 12px;
text-align: center;
font-size: 9px;
color: white;
}
<input type="checkbox" class="purple_checkbox">
It will be like this when checked with this code.

My solution
Initially posted here.
input[type="checkbox"] {
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
background: lightgray;
height: 16px;
width: 16px;
border: 1px solid white;
}
input[type="checkbox"]:checked {
background: #2aa1c0;
}
input[type="checkbox"]:hover {
filter: brightness(90%);
}
input[type="checkbox"]:disabled {
background: #e6e6e6;
opacity: 0.6;
pointer-events: none;
}
input[type="checkbox"]:after {
content: '';
position: relative;
left: 40%;
top: 20%;
width: 15%;
height: 40%;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
display: none;
}
input[type="checkbox"]:checked:after {
display: block;
}
input[type="checkbox"]:disabled:after {
border-color: #7b7b7b;
}
<input type="checkbox"><br>
<input type="checkbox" checked><br>
<input type="checkbox" disabled><br>
<input type="checkbox" disabled checked><br>

2022 - there is a much better solution to this problem now
Just use the accent-color property and make sure you achieve proper contrast ratios for accessibility:
.blue-checkbox {
accent-color: #00eaff;
height: 30px; /* not needed */
width: 30px; /* not needed */
}
<input class="blue-checkbox" type="checkbox" />

We can provide background color from the css file. Try this one,
<!DOCTYPE html>
<html>
<head>
<style>
input[type="checkbox"] {
width: 25px;
height: 25px;
background: gray;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
outline: none;
position: relative;
left: -5px;
top: -5px;
cursor: pointer;
}
input[type="checkbox"]:checked {
background: blue;
}
.checkbox-container {
position: absolute;
display: inline-block;
margin: 20px;
width: 25px;
height: 25px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="checkbox-container">
<input type="checkbox" />
</div>
</body>
</html>

The Best solution to change background checkbox color
input[type=checkbox] {
margin-right: 5px;
cursor: pointer;
font-size: 14px;
width: 15px;
height: 12px;
position: relative;
}
input[type=checkbox]:after {
position: absolute;
width: 10px;
height: 15px;
top: 0;
content: " ";
background-color: #ff0000;
color: #fff;
display: inline-block;
visibility: visible;
padding: 0px 3px;
border-radius: 3px;
}
input[type=checkbox]:checked:after {
content: "✓";
font-size: 12px;
}
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
<input type="checkbox" name="vehicle" value="Car" checked> I have a bus<br>

Improving another answer here
input[type=checkbox] {
cursor: pointer;
margin-right: 10px;
}
input[type=checkbox]:after {
content: " ";
background-color: lightgray;
display: inline-block;
position: relative;
top: -4px;
width: 24px;
height: 24px;
margin-right: 10px;
}
input[type=checkbox]:checked:after {
content: "\00a0\2714";
}

When you input the body tag, press space just one time without closing the tag and input bgcolor="red", just for instance. Then choose a diff color for your font.