How to add asterisks to required form options using CSS

When making a web form, if an option is required, an asterisk is usually added to the option. Below, I will share with you how to use CSS to add an asterisk to the required form option. Friends who need it can refer to it. Bar

When making a web form, if an option is required, an asterisk is usually added to the option, such as Typecho’s comment form:

<p class="form-group">
    <label for="author">姓名</label> <span class="required">*</span>
    <input type="text" id="author" name="author" required="required" size="30" class="form-text">
</p>

Example:

* Name

Then add a little CSS style to the asterisk:

.form-group span.required {
    color: #999;
    font-size: 150%;
}

For example:

But sometimes we may not be able to modify the HTML structure, or we may not want to add extra meaningless tags. In this case, we can use the CSS after pseudo-class to create a star. Number.

Still with the form above, delete the code efc33982f0a588fb3522889889d951c9*54bdf357c58b8a65c66d7c19c8e4d114, and then add CSS:

.form-group label:after {
    content: ' *';
    color: #999;
    font-size: 150%;
}

In this way, you can use CSS to create an asterisk that represents a must-select.

In fact, the before and after pseudo-classes of CSS are very easy to use. Most people just use them to clear floats. In fact, if you use your imagination and make good use of these two pseudo-classes, you can do amazing things.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Use css3 to achieve ripple effects and H5 to achieve dynamic wave effects

##Related to CSS3 region module region Code

How to use CSS to achieve a black navigation menu effect with shadow effect

##

The above is the detailed content of How to add asterisks to required form options using CSS. For more information, please follow other related articles on the PHP Chinese website!