`

Required red star

 
阅读更多

 

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 .

分享到：
| Overlapped Margins
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics