利用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 的beforeafter伪类是非常好用的,大多数人只是拿它来清除浮动,其实脑洞开一下,好好利用这两个伪类可以做出很神奇的事情。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏软件开发 -- 分享 互助 成长

文件重定向函数freopen

头文件:stdio.h FILE *freopen( const char *filename, const char *mode, FILE *stream ...

1727
来自专栏州的先生

使用Phantomjs模拟登录QQ空间

1102
来自专栏专业duilib使用+业余界面开发

duilib的Combo控件滚动条不显示的问题

1864
来自专栏CRPER折腾记

Angular 2 + 折腾记 :(8) 动手写一个不怎么靠谱的上传组件

上传功能在任何一个网站中的地位都是举足轻重的,这篇文章主要扯下如何实现一个上传组件

931
来自专栏九彩拼盘的叨叨叨

CSS hack总结

有时,我们为了让一些外观在不同浏览器中做保持一致。就不得不用css hack。下面是常用的css hack。

732
来自专栏强仔仔

利用js实现输入框动态提示信息

为了提高和用户的交互性,现在的输入框往往都采用输入信息自动提示的功能,类似于百度输入框中的提示功能。 设计思路是:在输入框input的组件下面放置一个div,这...

2036
来自专栏Nian糕的私人厨房

Vue2.0 Vuex初始化及歌手数据的配置

本次的系列博文的知识点讲解和代码,主要是来自于 黄轶 在慕课网的 Vue 2.0 高级实战-开发移动端音乐WebApp 课程,由个人总结并编写,其代码及知识点...

913
来自专栏一“技”之长

标签之美三——超链接的嵌入 原

通常的超链接有两种方式,一种是链接到另一个文件,另一种是链接到当前文件的某个位置。这两种方式都是通过<a></a>标签来创建,其中href属性用来指定链接的目标...

842
来自专栏微信小程序开发

说说小程序中textarea的坑

有很多用户都给我家小程序客服反馈,说是页面无法输入内容,集中在微信6.6.7版本,之前的微信版本都正常。

1473
来自专栏Android学习之路

seekbar

1467

扫码关注云+社区