How to add asterisks to required form options using CSS

不言
Release: 2018-06-20 11:24:57
Original
2481 people have browsed it

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>
Copy after login

Example:

* Name

Then add a little CSS style to the asterisk:

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

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 <span class="required">*</span>, and then add CSS:

.form-group label:after {
    content: &#39; *&#39;;
    color: #999;
    font-size: 150%;
}
Copy after login

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!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template