通过lable选中内容的例子

诗霖雪

于 2023-10-24 19:46:55 发布

阅读量71

点赞数

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/m0_56713342/article/details/134019816

版权

<label>标签的作用是为鼠标用户改进了可用性，

当用户点击<label>标签中的文本时，浏览器就会自动将焦点转到和该标签相关联的控件上；

< label> 标签的 for 属性应当与相关元素的 id 属性相同。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      * {
        padding: 0;
        margin: 0;
        list-style: none;
      }
      ul {
        width: 500px;
        height: 300px;
        border: 1px solid red;
        margin: 50px auto;
        position: relative;
      }
      ul label {
        /* position: absolute; */
        float: left;
        width: 100px;
        height: 40px;
        border: 1px solid rgb(238, 137, 137);
      }
      ul input {
        display: none;
      }
    .first {
        width: 100%;
        font-size: 20px;
        height: 260px;
        background-color: pink;
        position: absolute;
        text-align: center;
        top: 40px;
        opacity: 0;
      }
      .second {
        width: 100%;
        font-size: 20px;
        height: 260px;
        background-color: rgb(151, 252, 164);
        position: absolute;
        text-align: center;
        top: 40px;
        opacity: 0;
      }
      .third {
        width: 100%;
        height: 260px;
        font-size: 20px;
        background-color: rgb(240, 98, 214);
        text-align: center;
        position: absolute;
        top: 40px;
        opacity: 0;
      }
      .four {
        width: 100%;
        height: 260px;
        font-size: 20px;
        background-color: rgb(196, 155, 238);
        text-align: center;
        position: absolute;
        top: 40px;
        opacity: 0;
      }
      input:checked ~ div {
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <input type="radio" id="content1" checked name="inp1" />
        <label for="content1">one</label>
        <div class="first">水光敞艳晴方好,<br>山色空蒙雨亦奇。<br>
            欲把西湖比西子，<br>淡妆浓抹总相宜。</div>
      </li>
      <li>
        <input type="radio" id="content2" name="inp1" />
        <label for="content2">two</label>
        <div class="second">日照香炉生紫烟,<br>遥看瀑布挂前川.<br>飞流直下三千尺,<br>疑是银河落九天。</div>
      </li>
      <li>
        <input type="radio" id="content3" name="inp1" />
        <label for="content3">three</label>
        <div class="third">解落三秋叶，<br>能开二月花。<br>过江千尺浪，<br>入竹万竿斜。</div>
      </li>
      <li>
        <input type="radio" id="content4" name="inp1" />
        <label for="content4">four</label>
        <div class="four">空山不见人，<br>但闻人语响。<br>返景入深林,<br>复照青苔上。</div>
      </li>

      
    </ul>
  </body>
</html>