Fill checkbox on selection with CSS - javascript

Is it possible to fill the checkbox with a background colour when checked? Also to disable the 'tick' itself.
How do I achieve this? Should I be looking at jQuery/Javascript for this?
Fiddle Demo: http://jsfiddle.net/119a7e8r/
li.squaredTwo li label {
display:none
}
input[type=checkbox]:checked {
background:red
}
<ul>
<li id='field_1_20' class='gfield squaredTwo field_sublabel_below field_description_below' >
<label class='gfield_label' >Is it free</label>
<div class='ginput_container ginput_container_checkbox'>
<ul class='gfield_checkbox' id='input_1_20'>
<li class='gchoice_1_20_1'>
<input name='input_20.1' type='checkbox' value='Yes' id='choice_1_20_1' tabindex='35' />
<label for='choice_1_20_1' id='label_1_20_1'>Yes</label>
</li>
</ul>
</div>
</li>
</ul>

Here's a nifty CSS-only solution for custom checkboxes:
.hideme {
display: none;
}
.woo {
cursor: pointer;
}
.hideme + .woo:before {
width: 10px;
height: 10px;
border: 2px solid gray;
border-radius: 2px;
box-shadow: -1px 1px 2px 2px rgba(0,0,0,0.2);
background: red;
position: relative;
display: inline-block;
margin-right: 1ex;
content: "";
}
.hideme:checked + .woo:before {
background: green;
}
<input type="checkbox" class="hideme" id="myinput" /><label class="woo" for="myinput">Click me</label>

My starting point for just pure CSS on this would be something like this:
HTML
<input type="checkbox">Hello</input>
CSS
input[type=checkbox] {
width: 20px;
height: 20px;
margin-right: 5px;
vertical-align: bottom;
}
input[type=checkbox]:after {
content: "";
border-bottom: 10px solid red;
border-top: 10px solid red;
display: block;
opacity: 1;
}
input[type=checkbox]:checked:after {
border-bottom: 10px solid blue;
border-top: 10px solid blue;
}
Demo: http://codepen.io/newanalog/pen/LppBgv
Try playing around with the opacity and sizes.

I think you should be looking at jQuery for this. here are some examples for other stackoverflow questions, with a working jsfiddle
hope this helps!

Related

How to check a specific checkbox in a pure CSS Accordion via URL?

I use a pure CSS Accordion to present my content. The Accordion works with normal checkboxes. Now I want to implement, that by sending a simple link, a single checkbox entry will be checked and with the help of an anchor the browser should jump to that entry and show the specific content to the reader.
The whole thing should be done preferably without a scripting or programming language, but after a lot of research I think that at least JavaScript will be required (it must run on the client side, so no PHP or similar).
I have searched and tested a lot but unfortunately I have not found any suitable solution that would work.
```
<!DOCTYPE html>
<html>
<head>
<title>My example Website</title>
</head>
<body>
<style>
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color:black;
}
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: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input + label + .content {
display: none;
}
input:checked + label + .content {
display: block;
}
</style>
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div class="content">
My Content 1
</div>
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div class="content">
My Content 2
</div>
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div class="content">
My Content 3
</div>
</body>
</html>
```
You're correct that JavaScript is required. I have provided a solution, but I haven't tested it, because it's not possible to test in the snippet. It should select the relevant checkbox when a hash tag is detected in the URL that corresponds with a checkbox ID.
So you would use some time https://www.website.com/#title1
// Check if URL of browwser window has hash tag
if (location.hash) {
// Get URL hash tag
const hash = window.location.hash;
// Select checkbox with ID of hashtag
const checkbox = document.querySelector(hash);
// Check if checkbox exists
if(checkbox) {
// Set selected checkbox as checked
checkbox.checked = true;
}
}
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color:black;
}
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: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input + label + .content {
display: none;
}
input:checked + label + .content {
display: block;
}
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div class="content">
My Content 1
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div class="content">
My Content 2
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div class="content">
My Content 3
</div>

Custom CSS with Checkbox and NgFor

I am trying to get a custom check box 'clickable' when being iterated on with an *ngFor. I have the custom CSS, but nothing is working on the click event.
I am guessing that it is because of the for property on the label, but I don't know how to fix it.
Stackblitz: https://stackblitz.com/edit/angular-4znmwv?embed=1&file=src/app/app.component.css&view=editor
HTML:
<div *ngFor="let item of data">
<input type="checkbox" [checked]= "item.selected" (change)="setChange(item, $event)">
<label htmlFor="{{item.name}}">{{item.name}}</label>
</div>
CSS:
input[type="checkbox"] {
position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
input[type="checkbox"] + label {
display: block;
position: relative;
padding: 0 1.5rem;
}
input[type="checkbox"] + label::before {
content: '';
position: relative;
display: inline-block;
margin-right: 10px;
width: 20px;
height: 20px;
color: #2a3037;
background-color: #fff;
border-color: #1c8d3e;
}
input[type="checkbox"]:checked + label::before {
color: #fff;
background-color: #138630;
border-color: #000000;
}
input[type="checkbox"]:checked + label::after {
content: '';
position: absolute;
top: 3px;
left: 27px;
border-left: 2px solid black;
border-bottom: 2px solid black;
height: 6px;
width: 13px;
transform: rotate(-45deg);
}
input[type="checkbox"]:focus + label::before {
outline: #5d9dd5 solid 1px;
box-shadow: 0 0px 8px #5e9ed6;
}
input[type="checkbox"]:disabled + label {
color: #575757;
}
input[type="checkbox"]:disabled + label::before {
background: #ddb862;
}
try like this , I have just set the for attribute for the label base of the checkbox id that have been set by item name
<div *ngFor="let item of data">
<input type="checkbox" [id]="item.name">
<label [for]="item.name">{{item.name}}</label>
</div>
demo 🚀
<div *ngFor="let item of data;let i = index">
<input type="checkbox" [checked]= "item.selected" id="{{item.name}}" (change)="setChange(item, $event)">
<label for="{{item.name}}">{{item.name}}</label>
</div>
Try this.
Set the id as the same as the for of the label it will work properly and for is only the attribute name for label and not htmlFor.
Here i have added index for reference if you want the id to be different from the itemname which is dynamically gives index Use like this
<div *ngFor="let item of data;let i = index">
<input type="checkbox" [checked]= "item.selected" id="{{'checkbox'+i}}" (change)="setChange(item, $event)">
<label for="{{'checkbox' + i}}">{{item.name}}</label>
</div>
This way your id would be something like this
checkbox1
checkbox2
...

Custom Radio button selection bug in angular 6 (inside of ngFor)

Selecting radio input inside one item in ngFor triggers other radio inputs checked . Created a demo .
Html
<div class='section' *ngFor="let item of radioData">
<div class="radio-selection">
<input type="radio" attr.name="radio-{{item.Id}}" value="true" attr.id="radio-first-{{item.Id}}" [(ngModel)]='item.IsSelected'>
<label attr.for="radio-first-{{item.Id}}">Radio-first {{item.Id}}--value={{item.IsSelected}}</label>
</div>
<div class="radio-selection">
<input type="radio" attr.name="radio-{{item.Id}}" value="false" attr.id="radio-second-{{item.Id}}" [(ngModel)]='item.IsSelected'>
<label attr.for="radio-second-{{item.Id}}">Radio-second {{item.Id}}--value={{item.IsSelected}}</label>
</div>
</div>
css
.section {
border:1px solid #000;
margin-bottom:1rem;
}
.radio-selection {
input[type="radio"] {
display: none;
}
input[type="radio"] + label {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
&:hover {
&:before {
border-color: green;
}
}
}
input[type="radio"] + label:before {
content: "";
background: #fff;
border: 1px solid #333;
display: inline-block;
vertical-align: middle;
width: 15px;
height: 15px;
margin-right: 10px;
text-align: center;
padding: 2px;
border-radius:50%;
}
input[type="radio"]:checked + label:before {
background:red;
box-shadow: inset 0px 0px 0px 2.5px #fff;
}
}
Thanks
Use name instead of attr.name to set the name of the input elements (see this stackblitz):
<input type="radio" name="radio-{{item.Id}}" ...>
or use the property binding syntax (see this stackblitz):
<input type="radio" [name]="'radio-'+item.Id" ...>

How to capture and style the top checkbox in a 2 level list

This is doing my head in. I have a 2-level list that functions nicely with some jQuery. I want to capture the top checkbox ('Master checkbox') to style it in CSS and hover a border around it, but I can't seem to access it. Wrapping a label around the input tag messses up my jQuery and doesn't seem to help anyway.
Any ideas anyone on what I'm doing wrong? Fiddle
$('input[type=checkbox]').click(function() {
$(this).next().find('input[type=checkbox]').prop('checked', this.checked);
$(this).parents('ul').prev('input[type=checkbox]').prop('checked', function() {
return $(this).next().find(':checked').length;
});
});
.treeBOXClass {
border: 1px solid green;
width: 540px;
height: 250px;
font-family: "Verdana", Arial, serif;
font-size: 13px;
padding: 10px 0px 0px 20px;
list-style-type: none;
background: white;
}
.treeBOXClass ul li {
color: blue;
margin: 7px 0px 4px 12px;
list-style-type: none;
}
.myFlexbox {
display: -webkit-flex;
display: flex;
width: 450px;
margin: 20px 0px 0px 0px;
padding: 15px 0px 15px 0px;
border: 1px solid blue;
}
.my_RH_Text {
width: 350px;
margin: 0px 0px 0px 20px;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="treeBOXClass">
<li>
<input type="checkbox" id="mastercheckbox" value="yes" />Master checkbox
<ul>
<label for="HS1">
<div class="myFlexbox">
<li><input type="checkbox" id="HS1" value="one" />HS1</li>
<div class="my_RH_Text">
This is text that I have put in the first box as an example
</div>
</div>
</label>
<label for="HS2">
<div class="myFlexbox">
<li><input type="checkbox" id="HS2" value="one" />HS2</li>
<div class="my_RH_Text">
This is text that I have put in the second box as an example
</div>
</div>
</label>
</ul>
</li><br>
</ul>
Wrap a label around the input element and move the id to it.
Then tweak the jquery so instead of targeting the sibling, it has to go to the parent THEN the sibling.
Proof of concept: I've added a red border around the master checkbox.
PS: Also wrapped the ul children in li tags for valid html.
$('input[type=checkbox]').click(function() {
$(this).parent().next().find('input[type=checkbox]').prop('checked', this.checked);
$(this).parents('ul').prev().find('input[type=checkbox]').prop('checked', function() {
return $(this).parent().next().find(':checked').length;
});
});
#mastercheckbox {
border:1px solid red;
}
.treeBOXClass {
border: 1px solid green;
width: 540px;
height: 250px;
font-family: "Verdana", Arial, serif;
font-size: 13px;
padding: 10px 0px 0px 20px;
list-style-type: none;
background: white;
}
.treeBOXClass ul li {
color: blue;
margin: 7px 0px 4px 12px;
list-style-type: none;
}
.myFlexbox {
display: -webkit-flex;
display: flex;
width: 450px;
margin: 20px 0px 0px 0px;
padding: 15px 0px 15px 0px;
border: 1px solid blue;
}
.my_RH_Text {
width: 350px;
margin: 0px 0px 0px 20px;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="treeBOXClass">
<li>
<label id="mastercheckbox"><input type="checkbox" value="yes" />Master checkbox</label>
<ul>
<li>
<label for="HS1">
<div class="myFlexbox">
<input type="checkbox" id="HS1" value="one" />HS1
<div class="my_RH_Text">
This is text that I have put in the first box as an example
</div>
</div>
</label>
</li>
<li>
<label for="HS2">
<div class="myFlexbox">
<input type="checkbox" id="HS2" value="one" />HS2
<div class="my_RH_Text">
This is text that I have put in the second box as an example
</div>
</div>
</label>
</li>
</ul>
</li><br>
</ul>

Combining borders after showing data

I am attempting to combine a border for a title and description. The title shows upon page load, but once the title is clicked its description appears below it in its own border. I want those borders to combine when the description is showing.
I created a snipet to show what I have so far.
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
// Hide all other descriptions
$('.service_description').not(thisDescription).hide();
// Toggle (show or hide) this description
thisDescription.toggle(500);
});
.service_list {
margin-left: 20%;
}
.service_title {
border: 1px solid black;
padding: 8px;
width: 20%;
margin: 15px 0;
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
border: 1px solid black;
padding: 8px;
width: 20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">Floors</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofs</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>
I am trying to make it do something like this:
http://royalwoodfloor.com/services/
Does anyone know what I should do?
Image
Just change your css like this
.service_title {
border: 1px solid black;
padding: 8px;
width: 20%;
margin: 15px 0 0 0;/* update the margin */
}
here is the example link the example link
Updated the code snipet
Try something like this. Slightly changed your HTML structure and css.
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title"><span>Floors</span>
<div class="service_description"><span>The best floors!</span></div>
</div>
</div>
</div>
CSS
.service_list {
margin-left: 20%;
}
.service_title {
border: 1px solid black;
width: 30%;
}
.service_title span{
padding:8px 8px 8px 8px;
display:inline-block;
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
border-top: 1px solid black;
}
.service_description span{
padding:10px
}
Separate from the animation transition not being the same as the example, this fixes the margin issue:
.service_description {
display: none;
border: 1px solid black;
padding: 8px;
width: 20%;
margin-top: -16px;
}
See it working here

Categories