如何利用纯CSS改变html？radio/checkbox默认背景颜色样式

本篇文章给大家带来的内容是关于如何利用纯CSS改变html？radio/checkbox默认背景颜色样式，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

CSS代码：

input[type=checkbox] {

  margin-right: 5px;

  cursor: pointer;

  font-size: 14px;

  width: 15px;

  height: 12px;

  position: relative;

}

input[type=checkbox]:after {

  position: absolute;

  width: 10px;

  height: 15px;

  top: 0;

  content: " ";

  background-color: #ff0000;

  color: #fff;

  display: inline-block;

  visibility: visible;

  padding: 0px 3px;

  border-radius: 3px;

}

input[type=checkbox]:checked:after {

  content: "✓";

  font-size: 12px;

}

input[type=radio] {

    margin-right: 5px;

    cursor: pointer;

    font-size: 14px;

    width: 15px;

    height: 12px;

    position: relative;

}

input[type=radio]:after {

    position: absolute;

    width: 10px;

    height: 15px;

    top: 0;

    content: " ";

    background-color: #ff0000;

    color: #fff;

    display: inline-block;

    visibility: visible;

    padding: 0px 3px;

    border-radius: 50%;

}

input[type=radio]:checked:before {

    content: "✓";

    display: block;

    position: relative;

    top: -2px;

    left: 3px;

    width: 6px;

    height: 6px;

    color: #fff;

    font-weight: 400;

    z-index: 1;

}

HTML 示例：