改变input （radio，check）的样式

最新推荐文章于 2022-01-17 09:27:32 发布

在线小白www

最新推荐文章于 2022-01-17 09:27:32 发布

阅读量579

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_43654065/article/details/116655259

版权

CSS 专栏收录该内容

97 篇文章 2 订阅

订阅专栏

第一种

效果
html

<input type="radio"> 男

<style>
        input[type=checkbox] {
            cursor: pointer;
            position: relative;
            width: 15px;
            height: 15px;
            font-size: 14px;
        }

        input[type=checkbox]::after {
            position: absolute;
            top: 0;
            color: #000;
            width: 15px;
            height: 15px;
            display: inline-block;
            text-align: center;
            content: ' ';
        }

        input[type=checkbox]:checked::after {
            content: "✓";
            color: #fff;
            font-size: 12px;
            font-weight: bold;
            background-color: #ff366f;

			border-radius: 50%; //radio
        }
    </style>

第二种

效果

2.html

<style>
	.hide {
      display: none;
    }

    .square {
      background-color: #fff;
      border: 1px solid #bfbfbf;
      display: inline-block;
      height: 0.9em;
      padding: 2px;
      border-radius: 100%;
      margin-right: 5px;
      margin-top: -2px;
      vertical-align: middle;
      width: 0.9em;
      line-height: 1;
      box-sizing: content-box;
    }

    .hide:checked+.square:after {
      background-color: #ffd958;
      content: "";
      display: inline-block;
      height: 0.9em;
      width: 0.9em;
      vertical-align: top;
      border-radius: 100%;
    }

    .hide:checked+.square {
      border: 1px solid #ffd958;
    }
</style>
<input class="hide" type="radio" name="sex" id="tbb">
<span class="square"></span>
<span>b</span>

第三种

效果

2.html

<input type="radio"> 男
<style>
        input[type=checkbox] {
            cursor: pointer;
            position: relative;
            width: 15px;
            height: 15px;
            font-size: 14px;
        }

        input[type=checkbox]::after {
            position: absolute;
            top: -1px;
   			left: 1px;
            color: #000;
            content: ' ';
        }

        input[type=checkbox]:checked::after {
            content: "✓";
      		color: #ff366f;
	        font-size: 12px;
	        font-weight: bold;
        }
    </style>

第四种：添加背景图

效果

<input type="checkbox">
<style>
 	input[type=checkbox] {
      background-color: #fff;
      -webkit-appearance: none;
      border: 1px solid #000;
      width: 14px;
      height: 14px;
      border: none;
    }

    input[type=checkbox]:checked {
      background-image: url(../../static/admin/images/icon_2.png);
      background-size: contain;
    }
</style>