input 实现【单选高亮】

最新推荐文章于 2024-04-01 10:54:20 发布

qq_36437172

最新推荐文章于 2024-04-01 10:54:20 发布

阅读量797

点赞数 2

分类专栏： input radio 文章标签： input 单选筛选商品规格

本文链接：https://blog.csdn.net/qq_36437172/article/details/100154493

版权

2 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

可能你看到“单选高亮”没反应过来，直接来张图片你就马上清楚了：

不知道你是否第一次看到这种单选高亮的需求时，是怎么处理的。我第一次直接是用 JS 控制的。后来我发现这个需求用 CSS 更方便处理。

<div class="single-check">
  <input class="input" type="radio" name="colors" value="1">
  <div class="colors">天空之境</div>
</div>

选中样式：

.input:checked + .colors {
  border: 1px solid #e63838;
  color:#e63838;
  background-color: rgba(230, 56, 56, 0.2);
}

看效果：

两个选择器的区别：

~选择器：查找某个元素后面的所有兄弟元素

+选择器：查找某个元素后面紧邻的兄弟元素

详细代码，参考案例。

关注