切换css不适用于输入类型无线电

Question

我有一个开关按钮.但它不适用于输入类型的无线电.如果我尝试使用复选框按钮就可以了.为什么？如何解决,维护无线电输入？

@charset "utf-8";
/* CSS Document */

/* ---------- GENERAL ---------- */

body {
	background: #4a4a4a;
	color: #151515;
	font: 100%/1.5em "Lato", sans-serif;
	margin: 0;
}

input {
    font-family: inherit;
    font-size: 100%;
    line-height: normal;
    margin: 0;
}

input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

/* ---------- SWITCH ---------- */

.container {
	height: 64px;
	left: 50%;
	margin: -32px 0 0 -80px;
	position: absolute;
	top: 50%;
	width: 160px;
}

.switch {
	background: #fff;
	border-radius: 32px;
	display: block;
	height: 64px;
	position: relative;
	width: 160px;
}

.switch label {
	color: #fff;
	font-size: 48px;
	font-weight: 300;
	line-height: 64px;
	text-transform: uppercase;
	-webkit-transition: color .2s ease;
	-moz-transition: color .2s ease;
	-ms-transition: color .2s ease;
	-o-transition: color .2s ease;
	transition: color .2s ease;
	width: 100px;
}

.switch label:nth-of-type(1) {
	left: -75%;
	position: absolute;
	text-align: right;
}

.switch label:nth-of-type(2) {
	position: absolute;
  right: -75%;
	text-align: left;
}

.switch input {
	height: 64px;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	width: 160px;
	z-index: 2;
}

.switch input:checked~label:nth-of-type(1) { color: #fff; }
.switch input:checked~label:nth-of-type(2) { color: #808080; }

.switch input~:checked~label:nth-of-type(1) { color: #808080; }
.switch input~:checked~label:nth-of-type(2) { color: #fff; }

.switch input:checked~.toggle {
	left: 4px;
}

.switch input~:checked~.toggle {
	left: 100px;
}

.switch input:checked {
	z-index: 0;
}

.toggle {
	background: #4a4a4a;
	border-radius: 50%;
	height: 56px;
	left: 0;
	position: absolute;
	top: 4px;
	-webkit-transition: left .2s ease;
	-moz-transition: left .2s ease;
	-ms-transition: left .2s ease;
	-o-transition: left .2s ease;
	transition: left .2s ease;
	width: 56px;
	z-index: 1;
}

.c-window{
  display: block;
  position: absolute;
  width: 235px;
  height: 235px;
  margin: 0 auto;
  border-radius: 100%;
  border: 8px solid #FFB399;
  background: #5ddfe8; 
  box-shadow: 0px 0px 5px rgba(0,0,0,0.25) inset;
  overflow: hidden;
	transition: background 1s ease-in-out;
}


input[type="radio"]:checked ~ .c-window {
  background: #111;
}
 

	<div class="container">

       <div class="c-window"></div>
      
		<div class="switch white">

			<input type="radio" name="switch" id="switch-off">
			<input type="radio" name="switch" id="switch-on" checked>

			<label for="switch-off">On</label>
			<label for="switch-on">Off</label>

			<span class="toggle"></span>


  

		</div> <!-- end switch -->

	</div> <!-- end container -->

我希望.c窗口在切换时改变背景颜色

Answer 1

• 正如 @fcalderan 在评论中提到的，你有一些错别字。
• 您需要作为.c-window同级，更改 HTML 标记并添加z-index:-1到其中。
• 并且您需要指定哪个input将改变background颜色。

/* CSS Document */

/* ---------- GENERAL ---------- */

body {
  background: #4a4a4a;
  color: #151515;
  font: 100%/1.5em"Lato", sans-serif;
  margin: 0;
}
input {
  font-family: inherit;
  font-size: 100%;
  line-height: normal;
  margin: 0;
}
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
/* ---------- SWITCH ---------- */

.container {
  height: 64px;
  left: 50%;
  margin: -32px 0 0 -80px;
  position: absolute;
  top: 50%;
  width: 160px;
}
.switch {
  background: #fff;
  border-radius: 32px;
  display: block;
  height: 64px;
  position: relative;
  width: 160px;
}
.switch label {
  color: #fff;
  font-size: 48px;
  font-weight: 300;
  line-height: 64px;
  text-transform: uppercase;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
  width: 100px;
}
.switch label:first-of-type {
  left: -75%;
  position: absolute;
  text-align: right;
}
.switch label:last-of-type {
  position: absolute;
  right: -75%;
  text-align: left;
}
.switch input {
  height: 64px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 160px;
  z-index: 2;
}
.switch input:checked~label:first-of-type {
  color: #fff;
}
.switch input:checked~label:last-of-type {
  color: #808080;
}
.switch input:checked~label:first-of-type {
  color: #808080;
}
.switch input:checked~label:last-of-type {
  color: #fff;
}
.switch input:checked {
	z-index: 0;
}
.switch input:checked~.toggle {
  left: 4px;
}
.switch input~:checked~.toggle {
  left: 100px;
}
.toggle {
  background: #4a4a4a;
  border-radius: 50%;
  height: 56px;
  left: 0;
  position: absolute;
  top: 4px;
  -webkit-transition: left .2s ease;
  -moz-transition: left .2s ease;
  -ms-transition: left .2s ease;
  -o-transition: left .2s ease;
  transition: left .2s ease;
  width: 56px;
  z-index: 1;
}
.c-window {
  display: block;
  position: absolute;
  width: 235px;
  height: 235px;
  margin: 0 auto;
  border-radius: 100%;
  border: 8px solid #FFB399;
  background: #5ddfe8;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25) inset;
  overflow: hidden;
  transition: background 1s ease-in-out;
  z-index:-1
}
input:last-of-type[type="radio"]:checked ~ .c-window {
  background: #111;
}

<div class="container">
 
  <div class="switch white">
    <input type="radio" name="switch" id="switch-off">
    <input type="radio" name="switch" id="switch-on" checked>
    <label for="switch-off">On</label>
    <label for="switch-on">Off</label>
    <span class="toggle"></span>
    <div class="c-window"></div>
  </div>
  <!-- end switch -->
</div>
<!-- end container -->