html表单星号怎么标记(使用CSS 给表单必选项添加星号的实现方法)
类别:Web前端 浏览量:2706
时间:2022-01-26 01:35:08 html表单星号怎么标记
使用CSS 给表单必选项添加星号的实现方法在制作网页表单的时候,如果一个选项是必填的,通常会给选项添加一个星号,比如 Typecho 的评论表单:
<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>
示例:
* 姓名
然后给星号添加一点 CSS 样式:
.form-group span.required { color: #999; font-size: 150%; }
例如:
但是有些时候我们可能无法修改 HTML 结构,或者不想添加多余无意义的标签,这时可以利用 CSS 的 after 伪类来制作出一个星号。
还是上边的表单,删除 <span class="required">*</span>
这段代码,然后添加 CSS:
.form-group label:after { content: ' *'; color: #999; font-size: 150%; }
这样就可以通过 CSS 来制作出一个代表必选的星号。
其实 CSS 的 before 和 after 伪类是非常好用的,大多数人只是拿它来清除浮动,其实脑洞开一下,好好利用这两个伪类可以做出很神奇的事情。
总结
以上所述是小编给大家介绍的使用CSS 给表单必选项添加星号的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!
热门推荐
- SQL中Union,Intersect,Except
- 修改docker镜像的环境变量(解决docker加载新的镜像后repository和tag名称都为none的问题)
- textarea换行属性(处理textarea中的换行和空格)
- linux多线程怎么设置(超详细讲解Linux C++多线程同步的方式)
- linuxrabbitmq安装和使用教程(用docker部署RabbitMQ环境的详细介绍)
- nodejs八种命令(详细谈谈NodeJS进程是如何退出的)
- 用javascript解析json(JavaScript JSON.stringify的使用总结)
- nginx启动报错连接失败(宝塔面板Nginx环境中出现404 Not Found的解决方法)
- php字符串教程学习(php学习笔记之字符串常见操作总结)
- linux系统的pwd命令单词全称(WDCP是什么?Linux服务器管理系统WDCP有什么用?)