CSS3-纯css实现TodoList

最新推荐文章于 2024-04-08 15:45:39 发布

南乡人

最新推荐文章于 2024-04-08 15:45:39 发布

阅读量826

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/qq_37086982/article/details/103731924

版权

原理：利用兄弟选择器配合伪元素自定义单复选框

Demo 预览

在这里插入图片描述

基本样式

 <body>
    <form>
      <fieldset class="todo-list">   // fieldset 元素可将表单内的相关元素分组。
        <legend class="todo-list__title">My Special Todo List</legend> // legend 标签为 fieldset 元素定义标题。
        <label class="todo-list__label">
          <input type="checkbox" name="" id="" />
          <i class="check"></i>
          <span>Make awesome CSS animation</span>
        </label>
        <label class="todo-list__label">
          <input type="checkbox" name="" id="" />
          <i class="check"></i>
          <span>Watch awesome bangumi</span>
        </label>
        <label class="todo-list__label">
          <input type="checkbox" name="" id="" />
          <i class="check"></i>
          <span>Encounter awesome people</span>
        </label>
        <label class="todo-list__label">
          <input type="checkbox" name="" id="" />
          <i

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

南乡人

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3-纯css实现TodoList

利用兄弟选择器配合伪元素自定义单复选框<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> ...
复制链接

扫一扫