CSS操作单选框和复选框

大欢~

已于 2022-09-23 17:16:14 修改

阅读量5.7k

点赞数 2

文章标签： css 前端 html

于 2022-09-23 17:12:56 首次发布

本文链接：https://blog.csdn.net/qq_53197330/article/details/127011259

版权

本文介绍了如何使用CSS来改变复选框和单选框的样式，包括将复选框变为圆形并显示心形选中效果，以及将单选框变为有圆角的正方形并显示对号选中状态。通过清除默认样式并添加自定义内容和颜色，实现了表单元素的视觉优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决css 对于单选框和复选框样式的操作，简单整理了一下 css 操作表单的部分案例

首先从问的最多的复选框开始, 如何更改框的样式以及选中之后的显示的内容，以及默认复选框的修改

如果需要修改复选框的样式是圆形 , 并且选中是心形的

图:

那接下来需要如何操作呢，话不多说直接上代：

css代码：

 <style>
        input{
            appearance: none;/* 清除掉自带的样式 */
            -webkit-appearance: none;/* 这是做兼容用的 只有谷歌浏览器作为参照 */
            outline: none;/* 部分浏览器清除自带的样式后外面会带有一圈边框 */
            width: 18px;/* 设置复选框的宽度 */
            height: 18px;/* 设置复选框的高度 */
            border: 1px solid gray;/* 给复选框加边框 */
            text-align: center;/* 实现复选框里面内容水平居中 */
            line-height: 18px;/* 实现复选框里面内容垂直居中 */
            border-radius: 50%;/* 让框变成圆形 */
        }
        /*在复选框中加了一个心 并且让他变得透明 复选框和单选框是单标签中可以用:after和:beofre的 */
        input::after{
            content: '\2764';
            color: transparent;
        }
        /* 操作选中之后添入的心的颜色 */
        input:checked::after{
            color: red;
        }
    </style>

html代码：

<form action="#">
        晚上回到家干什么：<input type="checkbox">洗脸
        <input type="checkbox">洗脑
        <input type="checkbox">洗脚
        <input type="checkbox">洗屁屁
        <input type="checkbox">洗澡
        <input type="checkbox">洗手

    </form>

如何解决css 操作单选框，单选框的框是有圆角的正方形，选中之后变成对号，思路跟上面的是一样的先清除自带的样式, 然后一点一点的给单选框加上就可以了。

话不多说，直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input{
            appearance: none;
            -webkit-appearance: none;
            outline: none;
            width: 18px;
            height: 18px;
            text-align: center;
            line-height: 18px;
            border: 1px solid gray;
            border-radius: 5px;
        }
        input:after{
            content: '\2714';
            color: transparent;
        }
        input:checked::after{
            color: red;
        }
    </style>
</head>
<body>
    <form action="">
        <input type="radio" name="sex">男
        <input type="radio" name="sex">女
    </form>
</body>
</html>

css修饰之后就变成了这样：