input 被checked时和label配合的妙用

input 和label配合的妙用

1：作为文字隐藏与否的开关；

如下代码：对div里面所包含的文字较多，一开始只展示小部分，当用户点击按钮时，进行全部内容的展示（按钮是以向下隐藏箭头的图片）

html代码如下

   <input type="checkbox" id="A1" >

    <div>

 lestias assumenda nesciunt maiores minus molestiae exercitationem, dolores odit similique. Quidem odit distinctio optio totam eaque reiciendis expedita, voluptatem impedit iste placeat voluptate eius fugit vero, ut minus laudantium ullam debitis dolor? Possimus inventore sit molestiae distinctio. Dolore perspiciatis commodi maiores eius incidunt aut quisquam tenetur neque. Magni voluptatibus omnis tempore quas quos! Quisquam, molestias. Natus, illo culpa tempore enim praesentium corrupti ipsum! Sed eveniet voluptate, minus tempora illum deleniti laudantium facere enim nesciunt, aliquid temporibus pariatur qui. Totam autem consequatur officiis libero magni sit asperiores magnam ipsum.

    </div>  

    <!-- <input type="checkbox" id="A1" > -->

    <label for="A1">

        <img src="向下箭头按钮.jpg" alt="">

    </label>

 

 

css代码如下：

div{

    width: 500px;

    height: 100px;

    margin: auto;

    border: 1px solid red;

    overflow: hidden;

}

 

 

input{

    display: none;

}

                               // 当input被选中的时候，img 按钮转180，向上

                                  input:checked~label>img{

                                         transform: rotate(180deg);

                                 }

// 当input被选中的时候，div内容显示（选择器；只能是兄弟，而不能是弟兄，也就是说可以选中前面的标签+后面的标签；不能选择后面的标签+前面的标签）

input:checked+div{

    height: auto;

}

 

2：点击效果展示，当一个图片被点击后，图片就被换掉（以此来提醒用户点击成功，增加用户体验）

HTML代码如下（p元素用来插入背景图片，作为用户点击的按钮）：

<input type="checkbox" id="B2">

<label for="B2">

        <p></p>

</label>

 

CSS代码如下：

p{

   margin: 0;

   padding:0;

   width: 52px;

   height: 52px;

   background-image: url("点击前图片按钮.jpg")

}

#B2:checked+label>p{

    background-image: url("点击后图片按钮.jpg")

 }