必填项前的红色星号

最新推荐文章于 2025-03-17 09:51:55 发布

.慢慢亦漫漫

最新推荐文章于 2025-03-17 09:51:55 发布

阅读量7.3k

点赞数 7

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/weixin_43183219/article/details/123408006

版权

css 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在HTML表单中添加必填项前的红色星号，包括通过span标签和CSS伪元素before两种方法。尽管span标签可以实现效果，但较为繁琐，建议使用CSS伪元素before，其语法为.class::before或#id::before，这种方法更为简洁易用。

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

经常在填一些搜集信息或者注册账号时我们会看见，有一部分选项前面都有红色星号，这个星号怎么添加呢，总结两个小方法。

span标签

第一种就是在必填项前面写一个span标签，里面写*号，再用css修改一下样式就可以了。这种方法虽然可以达到效果，但是不推荐使用，比较麻烦。

<style>
    .kinds{
        display: grid;
        text-align: center;
        grid-template-columns: 100px 200px;
        grid-template-rows: 30px 30px;
    }
    select{
        width: 170px;
        height: 25px;
    }
    span{
        color: red;
    }
</style>
<body>
    <div class="kinds">
        <div> <span>*</span> 姓名</div>
        <div><input type="text" placeholder="请输入您的姓名"></div>
    </div>
    <div class="kinds">
        <div> <span>*</span> 性别</div>
        <div><select name="" id="">
            <option value="">男</option>
            <option value="">女</option>
        </select></div>
    </div>
    <div class="kinds">
        <div> <span>*</span> 身份证号</div>
        <div><input type="text" placeholder="请输入您的身份证号码"></div>
    </div>

在这里插入图片描述

使用伪元素before

before用法：. 类名/# id名：：before
这个方法相对于第一种来说简单一点，更倾向于使用这个方法。

<style>
    .kinds{
        display: grid;
        text-align: center;
        grid-template-columns: 100px 200px;
        grid-template-rows: 30px 30px;
    }
    select{
        width: 170px;
        height: 25px;
    }
    .kinds_1::before{
        content: '*';
        color: red;
    }
</style>
<body>
    <div class="kinds">
        <div class="kinds_1">姓名</div>
        <div><input type="text" placeholder="请输入您的姓名"></div>
    </div>
    <div class="kinds">
        <div class="kinds_1"> 性别</div>
        <div><select name="" id="">
            <option value="">男</option>
            <option value="">女</option>
        </select></div>
    </div>
    <div class="kinds">
        <div class="kinds_1"> 身份证号</div>
        <div><input type="text" placeholder="请输入您的身份证号码"></div>
    </div>

在这里插入图片描述