1 Replies - 782 Views - Last Post: 04 September 2014 - 12:14 AM

#1 Rabastan   User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 141
  • Joined: 27-August 12

Color Change not working

Posted 03 September 2014 - 07:02 PM

I a attempting to use HTML and CSS to change the background color of a Div when the checkbox is clicked. Its not working at all. The checkbox wont click, here is what I have.


HTML:
  <div class="step_box">
<div class="step_box">
    <div class="step_check_box">
    <div class ="checkbox">
    <input type="checkbox" id="checkboxInput">
    <label for="checkboxInput">
    </div>
    </div>
    <div class="step_box_inner">
      <div class="step_box_title"> Step One Greeting </div>
      <div class="step_box_text"> Step One Text </div>
    </div>
  </div>



And the CSS for this part:
.step_box {
	margin-top: 10px;
	width: 900px;
	height: 100%;
}
.step_box_inner {
	width: 800px;
	height:75px;
	float: right;
	background-color: #84c543;
	vertical-align: middle;
}
.step_box_title{
	width:800px;
	padding-top:10px;
	padding-bottom:5px;
	margin-left:10px;
	text-align: left;
	color:#FFF;
	font-size:20px;
	font-weight:bold;	
}
.step_box_text{
	width:800px;
	padding-bottom:10px;
	margin-left:15px;
	text-align: left;
	color:#FFF;
	font-size:18px;	

}
.step_check_box {
	width:100px;
	height:75px;
	float:left;
	vertical-align:middle;
	line-height:75px;
	background-color: #84c543;
}
.checkbox{
	width:75px;
	position:relative;
}
.checkbox label{
	cursor:pointer;
	position:absolute;
	width:73px;
	height:73px;
	top:0;
	left:0;
	background:#7ab63d;
}
.checkbox label:after{
	opacity:0.2;
	content:'';
	position:absolute;
	width:40px;
	height:23px;
	background:transparent;
	top:15px;
	left:13px;
	border:10px solid #fff;
	border-top:none;
	border-right:none;
	
	-webkit-transform: rotate(-45deg);
	-moz-transform:rotate(-45);
	-o-transform:rotate(-45);
	-ms-transform:rotate(-45);
	transform:rotate(-45);
}
.checkbox label:hover::after {
	opacity:0.5;
}
.checkpoint input[type=checkbox]:checked + label:after {
	opacity:1;
}
.checkpoint input[type=checkbox]:checked ~ stepbox_inner {
	background-color:#84c543;
}



I know its a lot but what am i doing wrong here?

Rab

This post has been edited by Rabastan: 03 September 2014 - 07:03 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Color Change not working

#2 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4277
  • View blog
  • Posts: 13,561
  • Joined: 08-June 10

Re: Color Change not working

Posted 04 September 2014 - 12:14 AM

1) the type’s value (in the CSS) should be quoted

2) ~ is the sibling selector and the only sibling the checkbox has is a <label>, not the <div>

3) there is no <stepbox_inner> element in HTML
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1