• ADADADADAD

    css中打钩的选框[ 编程知识 ]

    编程知识 时间:2024-12-24 19:31:16

    作者:文/会员上传

    简介:

    HTML中的复选框可以通过CSS定制样式,其中包括打钩形状。/*自定义 checkboxes*/input[type="checkbox"] {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0

    以下为本文的正文内容,内容仅供参考!本站为公益性网站,复制本文以及下载DOC文档全部免费。

    HTML中的复选框可以通过CSS定制样式,其中包括打钩形状。

    /*自定义 checkboxes*/input[type="checkbox"] {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}/*将复选框替换为圆形*/.checkmark {position: absolute;top: 0;left: 0;height: 25px;width: 25px;background-color: #eee;border-radius: 50%;}/*当复选框被选中时,添加打钩*/input[type="checkbox"]:checked ~ .checkmark:after {content: "";position: absolute;display: block;top: 50%;left: 50%;width: 12px;height: 12px;border-radius: 50%;border: solid white;border-width: 0 2px 2px 0;transform: translate(-50%, -50%) rotate(45deg);}

    以上代码将原本的方形框替换成了圆形框,并添加了打钩样式,可以通过修改样式属性改变打钩形状、颜色。

    css中打钩的选框.docx

    将本文的Word文档下载到电脑

    推荐度:

    下载
    热门标签: CSS中打钩的选框