自定义复选框 记住密码之类可以使用

太过爱你忘了你带给我的痛 2022-10-20 14:58 132阅读 0赞

自定义复选框 记住密码之类可以使用

最终样式：
在这里插入图片描述

html部分

  1. <input type="checkbox" name="" id="autoLogin">
  2.   <label for="autoLogin"></label>

css部分

  1. label {
  3.   width: .875rem;
  4.   height: .875rem;
  5.   border: 1px solid #3A88F7;
  6.   display: inline-block;
  7.   border-radius: 50%;
  8.   position: relative;
  9.   top: 3px;
  10.   margin-right: 10px;
  11. }
  13. input[type="checkbox"] {
  15.   display: none;
  16. }
  18. input:checked+label {
  20.   text-align: center;
  21.   line-height: 20px;
  22.   background: #3A88F7;
  23.   position: relative;
  24.   top: 3px;
  25.   margin-right: 10px;
  26. }
  28. input:checked+label::after {
  30.   content: "\2714";
  31.   color: #fff;
  32.   position: relative;
  33.   top: -3px;
  34.   font-size: 9px;
  35. }

发表评论

表情：
评论列表 （有 0 条评论，132人围观）

还没有评论，来说两句吧...

相关阅读

    相关 自定义兼容IE8的复选框

    最近写页面又用到了自定义单选框，复选框，之前也有写过，但是没有做记录，这一次又重新写，用了不短的时间，想想还是记录一下，留待后用。 复选框 HTML <div c

    叁歲伎倆叁歲伎倆/ 0 赞/ 241 阅读