How to add asterisks to the form's required options using CSS

When creating a Web page form, if an option is required, usually an asterisk is added to the option, and the following is the way to share the required options for adding asterisks to your form using CSS.

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" > Name </label> <span class= "required" >*</ span>    <input type= "text" id= "author" name= "author" required= "Required" size= "" "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:

However, sometimes we may not be able to modify the HTML structure, or do not want to add extra meaningless tags, you can use the CSS after pseudo-class to create an asterisk.

Or the top form, delete <span class="required">*</span> the code, and then add the CSS:

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

This makes it possible to create an asterisk that represents a mandatory selection via CSS.

In fact, the CSS before and after pseudo-class is very useful, most people just take it to clear floating, in fact, the brain hole, good use of these two pseudo-class can make a very magical thing.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!