html - 如果选中复选框，则更改一个 div 尺寸 - 仅限 html css

Question

Here我有只使用 HTML 和 CSS 的小元素。我要换<div class="pro">选中复选框时的属性。想隐藏所有其他<div class="pro">的制作 <article>完全显示在页面上。

.pro{
  min-width:310px;
  width:350px;
  margin:10px;
  height:200px;
  top:0px;
  position:relative;
  background:rgba(39, 174, 96, 1.0);
  float:left;
  z-index:0;
  overflow:hidden;
}
.proimg{
  width:100%;
  height:200px;
  position:absolute;
  z-index:1;
  top:0px;
  margin:0;
  backface-visibility:hidden;
  transition:all 500ms;
}
.pro:hover img{
  transform:rotateY(180deg);
}
.pro:hover .prop{
  left:0;
  transition:ease 500ms;
  opacity:1;
}
.pro:hover .prolab{
  right:0;
  transition:ease 500ms;
  opacity:1;
}
.proh{
  position:absolute;
  z-index:3;
  background:rgba(236, 240, 241, 1.0);
  color:rgba(44, 62, 80, 1.0);
  padding:0 15px;
  top:5px;
  line-height:29px;
  margin:0;
}
.prop{
  position:absolute;
  z-index:2;
  width:290px;
  height:130px;
  line-height:16px;
  color:rgba(44, 62, 80, 1.0);
  background:rgba(236, 240, 241, 0.7);
  top:19px;
  text-align:center;
  padding:17px 5px;
  margin:0 25px;
  transition:ease 500ms;
  overflow:hidden;
  left:100%;
  opacity:0;
}
input{
  display:none;
}
.prolab{
  position:absolute;
  z-index:6;
  bottom:5px;
  right:100%;
  background:rgba(236, 240, 241, 1.0);
  color:rgba(44, 62, 80, 1.0);
  padding:0 15px;
  line-height:29px;
  cursor:pointer;
  opacity:0;
}
.prolab:before{
    content:"Read more";
}
article{
  position:absolute;
  color:rgba(44, 62, 80, 1.0);
  background:rgba(236, 240, 241, 1.0);
  opacity:0;
  z-index:-1000;
  margin:0;
  width:100%;
  overflow:scroll; 
  float:left;
  clear:both;
}
input:checked ~ article{
  opacity:1;
  z-index:5;
  position:absolute;
  height:200px;
  padding:10px;
}
input:checked ~ .pro{
  z-index:0;
  height:auto;
}
input:checked ~ .prolab{
  z-index:999;
  position:absolute;
  top:0px;
  margin-right:0px;
  background:rgba(44, 62, 80, 1.0);
  color:rgba(236, 240, 241, 1.0);
  width:25px;
  padding:0;
  text-align:center;
  height:25px;
  line-height:25px;
}
input:checked ~ .prolab:before{
  content:"x";
}

<div class="pro">
  <img class="proimg" src="https://farm9.staticflickr.com/8578/16483910188_982634ea2d_z_d.jpg">
  <h4 class="proh">Pro Title</h4>
  <p class="prop">text here.</p>
  <input type="checkbox" id="pro1">
  <label for="pro1" class="prolab"></label>
  <article>  text here.
  </article>
</div>
<div class="pro">
  <img class="proimg" src="https://farm9.staticflickr.com/8578/16483910188_982634ea2d_z_d.jpg">
  <h4 class="proh">Pro Title</h4>
  <p class="prop">text here.</p>
  <input type="checkbox" id="pro2">
  <label for="pro2" class="prolab"></label>
  <article>
 text here. 
  </article>
</div>
<div class="pro">
  <img class="proimg" src="https://farm9.staticflickr.com/8578/16483910188_982634ea2d_z_d.jpg">
  <h4 class="proh">Pro Title</h4>
  <p class="prop">text here.</p>
  <input type="checkbox" id="pro3">
  <label for="pro3" class="prolab"></label>
  <article>
 text here. 
  </article>
</div>
<div class="pro">
  <img class="proimg" src="https://farm9.staticflickr.com/8578/16483910188_982634ea2d_z_d.jpg">
  <h4 class="proh">Pro Title</h4>
  <p class="prop">text here.</p>
  <input type="checkbox" id="pro4">
  <label for="pro4" class="prolab"></label>
  <article>
 text here. 
  </article>
</div>

Answer 1

如果 input 位于要隐藏/显示的框前面，则您可以使用 CSS 选择器 ~。

label 可以放在框内并设置样式，它最终可以通过 :after/:before 伪类生成一些复选框。

基本思路是这样的:

[type="checkbox"] {
  position:absolute;
  left:-999px;
}
:checked ~.div {
  display:none;
}
#a:checked ~.div.a ,
#b:checked ~.div.b ,
#c:checked ~.div.c ,
#d:checked ~.div.d {
  display:inline-block;
} 
div, label {
  margin:0.2em;
  padding:0.5em;
  display:inline-block;
  border:solid;
}

 <input id="a" type="checkbox"/> 
<input id="b" type="checkbox"/> 
<input id="c" type="checkbox"/>
<input id="d" type="checkbox"/>
<div class="div a">
  <label for="a">a</label>
  <p>box 1</p>
</div>
<div class="div b">
  <label for="b">b</label>
  <p>box 2</p>
</div>
<div class="div c">
  <label for="c">c</label>
  <p>box 3</p>
</div>
<div class="div d">
  <label for="d">d</label>
  <p>box 4</p>
</div>