:checked伪类与各种选择交互实现实例页面

展示

代码

• HTML：

  <h4>标签的选择</h4>
  请选择你感兴趣的话题：<br>
  <input type="checkbox" class="cs-topic" aria-label="科技">
  <input type="checkbox" class="cs-topic" aria-label="体育">
  <input type="checkbox" class="cs-topic" aria-label="军事">
  <input type="checkbox" class="cs-topic" aria-label="娱乐">
  <input type="checkbox" class="cs-topic" aria-label="动漫">
  <input type="checkbox" class="cs-topic" aria-label="音乐">
  <input type="checkbox" class="cs-topic" aria-label="电影">
  <input type="checkbox" class="cs-topic" aria-label="生活">
  <p>您已选择<span class="cs-topic-counter"></span>个话题。</p>
  
  <h4>图像的选择</h4>
  请选择壁纸：<br>
  <input type="radio" class="cs-bg" name="bg" checked style="--bgimg: url('./bg-1.jpg')">
  <input type="radio" class="cs-bg" name="bg" style="--bgimg: url('./bg-2.jpg')">
  <input type="radio" class="cs-bg" name="bg" style="--bgimg: url('./bg-3.jpg')">
  <input type="radio" class="cs-bg" name="bg" style="--bgimg: url('./bg-4.jpg')">
  <input type="radio" class="cs-bg" name="bg" style="--bgimg: url('./bg-5.jpg')">
  <input type="radio" class="cs-bg" name="bg" style="--bgimg: url('./bg-6.jpg')">
  

• CSS：

  [type="checkbox"],
  [type="radio"] {
      -webkit-appearance: none;
  }
  
  .cs-topic {
      width: 64px;
      margin: 5px 0 0;
      padding: 5px 0;
      border: 1px solid silver;
      text-align: center;    
      cursor: pointer;
  }
  .cs-topic::before {
      content: attr(aria-label);
  }
  .cs-topic:hover {
      border-color: gray;
  }
  .cs-topic:checked {
      border-color: deepskyblue;
      background-color: azure;
  }
  /* 选择计数器 */
  body {
      counter-reset: topicCounter;
  }
  :checked + .cs-topic {
      counter-increment: topicCounter;
  }
  .cs-topic-counter::before {
      color: red;
      margin: 0 2px;
      content: counter(topicCounter);
  }
  
  .cs-bg {
      width: 90px; height: 120px;
      background: var(--bgimg) no-repeat center / cover;
      margin: 5px 0 0;
      vertical-align: bottom;
      position: relative;
      overflow: hidden;
      cursor: pointer;
  }
  .cs-bg:checked::before {
      content: "";
      position: absolute;
      left: 0; right: 0; top: 0; bottom: 0;
      border: 2px solid deepskyblue;
      background: linear-gradient(-135deg, deepskyblue 14px, transparent 15px);
  }
  .cs-bg:checked::after {
      content: "";
      position: absolute;
      right: 2px; top: 3px;
      width: 8px; height: 3px;
      color: white;
      border-left: 2px solid; border-bottom: 2px solid;
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
  }