Use CSS to add asterisks to required form options. Example sharing

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. Well, I hope it helps everyone.

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 an asterisk.

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

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

This way you can create it through CSS An asterisk indicates a required selection.

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.

Related recommendations:

jQuery implementation of RadioButton to do the required verification function method sharing

Do optional parameters in PHP have to be in After the required parameters?

yii's method of removing asterisks in required fields

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