I have created some hidden checkboxes that change the label background colour when hovered. Also the label background colour changes when the hidden checkboxes is selected.
Is it possible to change the input background colour if and only if at least one checkbox label is selected?
```
Checkbox Selected Problem
.bd1 {border:solid 1px #999;}
.flr {float:right;}
.fsl {font-size: large;}
.fsX {font-size: x-large;}
.fwb {font-weight: 700;}
.hhh {display:none;}
.mga {margin: 1em auto 0;}
dt,dd,
.p42 {padding: 0.42em;}
.tac {text-align:center;} .tal {text-align:left;}
.w88 {width:88%; max-width:1024px;}
.labelToCheck {
font-weight: bold;
background-color: #ddd; color: #666;
display:inline-block;
margin: 0.88em 1em;
padding: 0.42em 1em;
text-align: center;
}
.labelToCheck:hover {
background-color:#900; color:#fff;
}
.checkLabel:checked + .labelToCheck {
color: #f00;
background-color: aqua;
}
<h1> Checkbox Selected Problem </h1>
<dl class="tal bd1">
<dt class="fwb">Hover and selected label working correctly.</dt>
<dd>Input value (Create Template) does not change colour when label hovered</dd>
<dd>and</dd>
<dd>does not change colour when checkbox selected</dd>
</dl>
<hr>
<form
method = "get"
action = "?"
target = "_top" novalidate=""
class="i-amphtml-form">
<dl>
<dt class="tal fsl fwb">Components</dt>
<dd>
<input type="checkbox" id="0" class="hhh checkLabel" name="0" value="0">
<label class="labelToCheck" for="0">
hello-world </label>
<input type="checkbox" id="1" class="hhh checkLabel" name="1" value="1">
<label class="labelToCheck" for="1">
accordion </label>
<input type="checkbox" id="2" class="hhh checkLabel" name="2" value="2">
<label class="labelToCheck" for="2">
advert </label>
<input type="checkbox" id="3" class="hhh checkLabel" name="3" value="3">
<label class="labelToCheck" for="3">
analytics </label>
<input type="checkbox" id="4" class="hhh checkLabel" name="4" value="4">
<label class="labelToCheck" for="4">
audio </label>
<input type="checkbox" id="5" class="hhh checkLabel" name="5" value="5">
<label class="labelToCheck" for="5">
brid-player </label>
<input type="checkbox" id="5" class="hhh checkLabel" name="5" value="5">
<label class="labelToCheck" for="5">
youtube </label>
</dd>
<dt class="tac">
<input
title = "a valid AMP web page will be produced!"
class = "fsX labelToCheck"
type = "submit"
value = "Create Template"
>
<br>
</dt>
</dl>
</form>
PaulOB
April 25, 2017, 11:55am
2
You would need the create-template input to be a sibling of the checkboxes and then you could say input:checked ~ input.fsx{background:red}.
Your present structure will not allow you to do this.
1 Like
Should be fairly easy with some javascript. On each change, count the checked boxes and highlight/lowlight as necessary. This untested example is using jquery. You just need to add css rules for a highlight class.
$('input.checkLabel').change(function(){
if($('input.checkLabel:checked').length>0) {
$('.labelToCheck').addClass('highlight');
}
else {
$('.labelToCheck').removeClass('highlight');
}
});
1 Like
Many thanks Paul:
I even managed to hide the <input>checkboxes are selected
<!DOCTYPE HTML>
<html lan="en">
<head>
<title> [SOLVED] Checkbox Selected Problem </title>
<style type="text/css">
.bd1 {border:solid 1px #999;}
.flr {float:right;}
.fsl {font-size: large;}
.fsX {font-size: x-large;}
.fwb {font-weight: 700;}
.hhh {display:none;}
.mga {margin: 1em auto 0;}
dt,dd,
.p42 {padding: 0.42em;}
.tac {text-align:center;} .tal {text-align:left;}
.w88 {width:88%; max-width:1024px;}
.labelToCheck {
font-weight: bold;
background-color: #ddd;
color: #333;
display:inline-block;
margin: 0.88em 1em;
padding: 0.42em 1em;
text-align: center;}
.labelToCheck:hover {
color:#000;
background-color:#cff;}
.checkLabel:checked + .labelToCheck {
color:#000;
background-color: #0ff;}
.labelToCheck ~ .jblabelToCheck {
display: block;
visibility: hidden;
height: 4.2em;}
input{
background-color: aqua;
}
input:checked ~ .jblabelToCheck {
visibility: visible;
}
</style>
<head>
<body>
<h5 class="flr">
<a href="https://www.sitepoint.com/community/t/is-it-possible-to-change-input-background-color-when-a-checkbox-is-selected/261493">
SitePoint Forum
</a>
</h5>
<div class="w88 mga p42 tac">
<h1> [SOLVED] Checkbox Selected Problem </h1>
<dl class="tal bd1">
<dt class="fwb">Hover and selected label working correctly.</dt>
<dd>Input value (Create Template) does not change colour when label hovered</dd>
<dd>and</dd>
<dd>does not change colour when checkbox selected</dd>
<dt style="background-color:#afa; color:#000;">
<strong class="fsl"> [SOLUTION] </strong>
<hr>
You would need the create-template input to be a sibling of the checkboxes
<br>
and then you could say input:checked ~ input.fsx{background:red}.
<br><br>
Your present structure will not allow you to do this.
<br><br>
<strong class="XXXflr">
Many thanks to Paul O'Brien:
<a href="https://www.sitepoint.com/community/t/is-it-possible-to-change-input-background-color-when-a-checkbox-is-selected/261493">
SitePoint Forum
</a>
</strong>
</dt>
</dl>
<hr>
<form
method = "get"
action = "?"
target = "_top" novalidate=""
class="i-amphtml-form">
<dl>
<dt class="tal fsl fwb">Components Selection</dt>
<dd>
<input type="checkbox" id="0" class="hhh checkLabel" name="0" value="0">
<label class="labelToCheck" for="0">
hello-world </label>
<input type="checkbox" id="1" class="hhh checkLabel" name="1" value="1">
<label class="labelToCheck" for="1">
accordion </label>
<input type="checkbox" id="2" class="hhh checkLabel" name="2" value="2">
<label class="labelToCheck" for="2">
advert </label>
<input type="checkbox" id="3" class="hhh checkLabel" name="3" value="3">
<label class="labelToCheck" for="3">
analytics </label>
<input type="checkbox" id="4" class="hhh checkLabel" name="4" value="4">
<label class="labelToCheck" for="4">
audio </label>
<input type="checkbox" id="5" class="hhh checkLabel" name="5" value="5">
<label class="labelToCheck" for="5">
brid-player </label>
<input type="checkbox" id="6" class="hhh checkLabel" name="6" value="6">
<label class="labelToCheck" for="6">
youtube </label>
<input type="checkbox" class="hhh XXXcheckLabel">
<label class="jblabelToCheck tac">
<input
title = "a valid AMP web page will be produced!"
class = "fsX jblabelToCheck p42"
type = "submit"
value = "Create Template"
>
</label>
</dd>
</dl>
</form>
</body>
</html>
2 Likes
Many thanks for taking the time for your solution… unfortunately I forgot to mention that absolutely no JavaScript is allowed because it is for an AMP Project
Whether you are a publisher, e-commerce company, storyteller, advertiser or email sender, AMP makes it easy to create great experiences on the web. Use AMP to build websites, stories, ads and emails.
system
July 26, 2017, 2:21pm
6
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
