Required red star

最新推荐文章于 2024-08-29 11:32:48 发布

原创最新推荐文章于 2024-08-29 11:32:48 发布 · 130 阅读

0 ·

CC 4.0 BY-SA版权

css 同时被 2 个专栏收录

23 篇文章

订阅专栏

CSS Patterns

18 篇文章

订阅专栏

本文介绍了一种利用CSS控制HTML输入字段的必填标识，避免在每个地方手动添加星号的方法，通过使用伪类：after来实现。

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

Problem:

We usually put a red star after a field to indicate that this field is required. Of course, we can add a '*' and apply css on it. But it is really unconvenient to do so on everywhere. From the html semantical point of view, it is a info about the input, we do not need to write it explicitly.

Solution:

We can use css to control the place of the information about "required".

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <style>
        /*we can use before to display it before the fields*/
        .required:after{
            content:"*";
            color:red;
        }
    </style>
</head>
<body>
<div class="required">
    <input type="text"/>
</div>
</body>
</html>

Try it in jsfiddle

Note:

Unfortunately, we can not apply the css directly on the input element as described here .