如果选中复选框,则更改跨度的颜色

2022-01-28 02:37:55 标签 htmlcss

在待办事项列表应用程序中,如果你完成待办事项,文本的颜色会改变。

我试着这么做,但有个问题。

我怎样才能使这个只有纯css?

.todo-item {
  display: flex;
  justify-items: space-between;
  align-items: center;
  gap: 10px;
}
.todo-item div {
  position: relative;
}
.todo-item div input {
  position: absolute;
  opacity: 0;
  width: 20px;
  height: 20px;
  z-index: 50;
}
.todo-item div {
  border: 2px black solid;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.todo-item div input[type=checkbox]:checked+div {
  background-color: black;
}
<div class="todo-item">
  <span>If checkbox is selected, color of this text need to be changed to green.</span>
  <div>
    <input type="checkbox">
    <div>
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="white">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
      </svg>
    </div>
  </div>
</div>

# # #span is on a h是在一个更高的层次上吗input in the DOM hierarchy and since在DOM层次结构中,因为没有CSS父选择器,所以只使用CSS是不可能的。

如果你不想修改你当前的HTML结构,这里有一个JavaScript解决方案,它侦听一个更改事件,并检查输入是否被检查,如果是,设置span的颜色样式属性为绿色:

const span = document.querySelector('span');
const input = document.querySelector('input[type=checkbox]');
input.addEventListener('change', function() {
  span.style.color = input.checked ? "green" : "black";
})
.todo-item {
  display: flex;
  justify-items: space-between;
  align-items: center;
  gap: 10px;
}
.todo-item div {
  position: relative;
}
.todo-item div input {
  position: absolute;
  opacity: 0;
  width: 20px;
  height: 20px;
  z-index: 50;
}
.todo-item div {
  border: 2px black solid;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.todo-item div input[type=checkbox]:checked+div {
  background-color: black;
}
<div class="todo-item">
  <span>If checkbox is selected, color of this text need to be changed to green.</span>
  <div>
    <input type="checkbox">
    <div>
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="white">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
      </svg>
    </div>
  </div>
</div>

###你可以在代码中把span放在输入后,并在输入前显示它。您将能够使用~选择器样式span文本,就像您已经为假复选框做的那样

.wrapper {
  display: flex;
  flex-direction: row;
}
.checkbox-styled {
  order: 2;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid black;
}
input {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
}
input[type=checkbox]:checked + .checkbox-styled {
  background-color: black;
}
input[type=checkbox]:checked ~ span {
  color: green;
}
span {
  margin-right: 10px;
  order: 1;
}
<label class="wrapper">
  <input type="checkbox">
  <div class="checkbox-styled">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="white">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
    </svg>
  </div>
  <span>If checkbox is selected, color of this text need to be changed to green.</span>
</label>

阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码