html Evan Lovely的CodePen。自定义复选框和收音机表单元素 - 使用CSS3使复选框和收音机看起来很漂亮:)

Posted 2021-05-11

@import "compass";
input[type='checkbox'],
input[type='radio'] {
  position: relative;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 0;
  background: white;
  border: solid 1px #ccc;
  @include border-radius(2px);
  -webkit-box-shadow:inset 0 0 4px rgba(0,0,0,0.19);
  -webkit-transition: all .3s linear;
  .lt-ie9 & {
    background: transparent;
    width: auto;
    height: auto;
  }
  &:hover {
    border-width: 2px;
    border-color: #a5b800;
  }
  &:after {
    -webkit-transition: all .3s linear;
    opacity: 0;
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
  }
  &:active {
    background: rgba(255, 255, 255, 0.1);
    outline:none;
    &:after {opacity:.3;}
  }
  &:focus {
    outline: none;
  }
  &:checked {
    &:after {opacity: 1;}
    &:active:after {opacity: .3;}
  }
}
input[type='checkbox'] {
  &:after {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ bWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp bj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6 eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0 NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJo dHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlw dGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAv IiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RS ZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpD cmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFu Y2VJRD0ieG1wLmlpZDo3M0QwQjQ2NUYzRjkxMUUyQUE5NEE2NkEwRTAwNkUxMSIgeG1wTU06RG9j dW1lbnRJRD0ieG1wLmRpZDo3M0QwQjQ2NkYzRjkxMUUyQUE5NEE2NkEwRTAwNkUxMSI+IDx4bXBN TTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjczRDBCNDYzRjNGOTExRTJB QTk0QTY2QTBFMDA2RTExIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjczRDBCNDY0RjNGOTEx RTJBQTk0QTY2QTBFMDA2RTExIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4 bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+xcUfDQAAAYhJREFUeNpi/P//PwOpoHvvve2Xn3+2 y7CWs2Ik1YDWXXeOrL7wwhrENpcX+MBCiuYFJ5+0wDQzMjIyxJhIuTERq/nAnXcWEw89rIbxS50U y2yVhU4T5YUbL7+IJyy79OLH739gfpih5P4qV2UnsEsIGfDy80/2uCWXfgBpMN9CQeDdjDAdYZg8 0/NPPzmnH3k0/yDQieiagTYy5q+7/gmmWVWU+0+Pv4Yoshrm70YRz9dffmm14/rrFCEu1rfakryn YJIlG68/PvP4oyCILcjFyjAzXIdPhIftF7IBTAYyfIthnPY99ybvvvkG7Lf+Aw9WAwNOBsRmZ2Fi mBSsJScjwPEV3ZXgMGjeeefE2osvzEECrMyMDAG64kfh0QWKex91Py8t0c3YwggeiIXrrz/cf/ut HLqCTBu5yelWcnm4AhklFtJWXnl/6uEHARgfaOv1Nh91LXyxhGLAl59/mFJXXvl2/cUXdj0p3m+L YvS5CSYSkAHI+N3XXyxZq668BtHoctgwQIABAEdi1ERnXXX0AAAAAElFTkSuQmCC"); 
    $w: 16px;
    $h: 14px;
    width: $w;
    height: $h;
    margin-left: -1 * ($w / 2);
    margin-top: -1 * ($h / 2);
  }
}
input[type='radio'] {
  @include border-radius(11px);
  &:after {
    $size:12px;
    background: #2f89c3;
    width: $size;
    height: $size;
    @include border-radius($size / 2);
    margin-left: -1 * ($size / 2);
    margin-top: -1 * ($size / 2);
  }
}

<input type="checkbox"><br />
<input type="checkbox" checked="true">
  <hr />
<input type="radio" name="radio"><br />
<input type="radio" name="radio" checked="true>