[SOLVED] Is it possible to change input background color when a checkbox is selected?

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?

http://scratchpad.io/aspiring-copper-1914?0=0&1=1


``` 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; }
SitePoint Forum
<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>

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> when no checkboxes are selected :slight_smile:

<!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: &nbsp; 
				<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

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.