使用CSS 给表单必选项添加星号的实现方法

在制作网页表单的时候,如果一个选项是必填的,通常会给选项添加一个星号,下面通过给大家分享使用css表单必选项添加星号的实现方法,需要的朋友参考下吧

在制作网页表单的时候,如果一个选项是必填的,通常会给选项添加一个星号,比如 Typecho 的评论表单:

*

示例: 

* 姓名 

立即学习“前端免费学习笔记(深入)”;

然后给星号添加一点 CSS 样式:

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

例如:

使用CSS 给表单必选项添加星号的实现方法 

但是有些时候我们可能无法修改 HTML 结构,或者不想添加多余无意义的标签,这时可以利用 CSS 的 after 伪类来制作出一个星号。

还是上边的表单,删除 * 这段代码,然后添加 CSS:

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

这样就可以通过 CSS 来制作出一个代表必选的星号。

其实 CSS 的 before 和 after 伪类是非常好用的,大多数人只是拿它来清除浮动,其实脑洞开一下,好好利用这两个伪类可以做出很神奇的事情。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

用css3实现波纹特效和H5实现动态波浪效果

CSS3区域模块region的相关代码

如何用CSS实现带阴影效果的黑色导航菜单效果

以上就是使用CSS 给表单必选项添加星号的实现方法的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1610218.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 01:19:02
下一篇 2025年12月24日 01:19:32

相关推荐

  • 关于CSS代码如何书写规范

    这里为大家送上一份CSS代码书写规范究极指南,包括代码注释和命名规范以及空格缩进等一应俱全,都来自大家平时的约定俗成,绝对值得学习借鉴,需要的朋友可以参考下 1.格式化代码1.1文件[建议]:CSS文件使用无BOM的UTF-8编码1.2缩进[强制]:使用 4 个空格做为一个缩进层级,不允许使用 2 …

    好文分享 2025年12月24日
    000
  • 实如何使用CSS保持页面内容的宽高比

    这篇文章主要介绍了如何使用CSS保持页面内容宽高比的方法,作者举了伪元素和vw单元等不同方法下的例子,需要的朋友可以参考下 需求描述:移动端实现横跨页面半圆。(类似问题,实现4×4的正方形网格) 简化问题,我们可以理解为实现一个高度和宽度比为1:2的块。 需要解决问题:        1,…

    2025年12月24日 好文分享
    000
  • CSS3中文字镂空和透明值以及阴影效果的设置

    这篇文章主要介绍了css中文字镂空、透明值、阴影效果设置示例小结,其中通过text-stroke-color透明值的设置可以让文字在某些程度上更加柔和,需要的朋友可以参考下 text-fill-color打造镂空文字:代码 -webkit-text-fill-color:transparent; -…

    2025年12月24日 好文分享
    000
  • CSS3中not()选择器实现最后一行li去除某种css样式的代码

    这篇文章主要介绍了关于css3中not()选择器实现最后一行li去除某种css样式的代码,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 在日常开发中经常会遇到在循环中的最后一个li不同于其他的li,要去除某种css样式,本文介绍的是利用CSS3新增的:not()伪类选择符,实现起来非…

    2025年12月24日
    000
  • 关于CSS图片的优化建议

    这篇文章主要介绍了css图片优化的一些相关建议,主要针对sprites图片整合技术来作简单介绍,需要的朋友可以参考下   CSS图片优化就是尽量压缩图片的大小,加快页面加载速度,这对于大型网站是很有用的。不要小看它,它可以大大提高网页加载速度。通常大家用到的方法就是css sprites。   CS…

    好文分享 2025年12月24日
    000
  • CSS Sprite从大图中截取小图的解析

    这篇文章主要介绍了css sprite从大图中截取小图完整教程的相关资料,需要的朋友可以参考下 相信很多喜欢研究网页界面的童鞋都遇到过一个奇妙的现象:网页中很多图片素材被合成在一张图片上。 起初小菜模仿网站的时候,经常遇到这个现象,那时候也不知道这时什么技术,人家的整张图片素材不会利用,只能用ps切…

    2025年12月24日 好文分享
    000
  • 关于CSS中的class与id区别及用法的解析

    这篇文章主要介绍了关于css中的class与id区别及用法的解析,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 用p CSS制作Xhtml网页页面时,常会用到class 和id来选择调用CSS样式属性,那么什么时候该用class,什么时候又用id,下面详细了解CLASS与ID基本属性…

    好文分享 2025年12月24日
    000
  • css div实现的遮罩层兼容IE6-IE9和FireFox浏览器

    css p 遮罩层想必熟悉网页的朋友都不陌生吧,网上也有相关的实现文章,不过大都对浏览器的兼容性不好,在本文将为大家介绍的是一个可以兼容ie6-ie9 firefox 的遮罩层,感兴趣的朋友不要错过 Html代码: @@##@@ 数据加载中,请稍后… CSS样式: /*loading加载遮罩层c…

    2025年12月24日
    000
  • css的新属性display:box使用方法

    这次给大家带来css的新属性display:box使用方法,css的新属性display:box使用注意事项有哪些,下面就是实战案例,一起来看一下。 一、display:box;   在元素上设置该属性,可使其子代排列在同一水平上,类似display:inline-block;。 二、可在其子代设置…

    好文分享 2025年12月24日
    000
  • CSS浮动使用技巧

    这次给大家带来CSS浮动使用技巧,CSS浮动使用的注意事项有哪些,下面就是实战案例,一起来看一下。 浮动具有以下特性: 盖不住的文本 浮动元素后面不是块级元素,后面的元素将会和它并排(除非设置了元素的宽度,并且屏幕放不下时将会换行) 浮动元素的上一个元素如果没有浮动,浮动只在当前行浮动;当浮动遇到浮…

    2025年12月24日 好文分享
    000
  • 关于CSS中基代码base.css的内容

    base.css顾名思义就是基代码的含义,主要就是重置浏览器默认样式的一个集合吧,在进行css布局时把它加进去将会提高书写效率,感兴趣的朋友可以参考下 代码如下: /***** css set*****/ body, p, dl, dt, dd,ul,ol,li,h1,h2,h3,h4,h5,h6,…

    好文分享 2025年12月24日
    000
  • 关于css多行文本溢出时出现省略号的内容

    这篇文章主要介绍了css多行文本溢出时出现省略号的示例的相关资料,内容挺不错的,现在分享给大家,也给大家做个参考。 多行文本溢出时出现省略号 本文推荐2种方法。 1. css tip:只兼容chrome内核的浏览器。ff不支持。 立即学习“前端免费学习笔记(深入)”; .box { overflow…

    好文分享 2025年12月24日
    000
  • 用icon fonts来辅助CSS处理图片

    这篇文章主要介绍了使用icon fonts来辅助css处理图片,在移动端网页的设计中使用较多,需要的朋友可以参考下 由于移动端设备拥有不同分辨率,PPI 等引起的问题, 常常需要针对不同屏幕分辨率来调整优化,如使用 @2x 图片, max-width 限制等。采用 css @font-face 用来…

    好文分享 2025年12月24日
    000
  • CSS编写代码时的高性能总结

    这篇文章主要介绍了css编写时的性能优化以及高维护性优化建议总结,包括雪碧图和尺寸设定等热门的讨论点,需要的朋友可以参考下 性能,这个词如今被炒的很热,也是每个开发者,由“知道”、“会做”之后必经的一个“怎样做好”的阶段。性能关乎用户在不同设备和不同网络状态下的体验。也被多方面因素所影响。此文说说c…

    好文分享 2025年12月24日
    000
  • CSS中@规则的用法

    这篇文章主要介绍了css中一些@规则的用法小结,是css入门学习中的基础知识,需要的朋友可以参考下 at-rule是一个声明,为CSS提供执行或怎么表现的指令。每个声明以@开头,后紧跟一个可用的关键字,这个关键字充当一个标识符,用于表示CSS该做什么。这是一个通用的语法,尽管每个at-rule有其它…

    好文分享 2025年12月24日
    000
  • 关于CSS Normalize的文件配置

    这篇文章主要介绍了css normalize文件配置示例,对全局项目进行设置,需要的朋友可以参考下 作为前端工程师,很多人都有自己的一套CSS Normalize文件,这样能省掉开发过程中的不少麻烦,提高工作效率。在前人的基础上,我总结了自己的CSS Normalize文件,目前基本上每个项目都有在…

    好文分享 2025年12月24日
    000
  • 在CSS中对RGB颜色的使用分析

    这篇文章主要介绍了CSS中对RGB颜色的使用详解,是CSS入门学习中的基础知识,需要的朋友可以参考下 RGB颜色模型解释 RGB颜色模型就是一种描述某个颜色里面有多少红、绿、蓝三原色的量的方法,就像把水彩颜料或油彩颜料混合起来得到某种我们想要的真实色彩一样。 想象下如果你要配出一个纯蓝色,为了实现这…

    好文分享 2025年12月24日
    000
  • CSS中的inherit使用分析

    这篇文章主要介绍了css中的inherit使用技巧小结,css中的继承关键字的使用是css入门学习中的基础知识,需要的朋友可以参考下 稍不留意便会忽略掉级联样式表的特点。大多数开发者都知道inherit关键字,但有几个新的CSS3继承特性你可能不知道… property: inherit;   in…

    好文分享 2025年12月24日
    000
  • 利用css实现一款仿ios7的switches开关按钮

    这篇文章主要为大家介绍了纯css实现的一款仿ios7的switches开关按钮,无需引js代码。在实现中给出了两种颜色,三种不同大小的demo,需要的朋友可以参考下   今天给大家介绍一款仿ios7的switches开关按钮。这款按钮也是纯css实现的。无需引js代码。在实现中给出了两种颜色,三种不…

    2025年12月24日
    000
  • css+transition做出显隐动画

    这次给大家带来css+transition做出显隐动画,的注意事项有哪些,下面就是实战案例,一起来看一下。 我们先来看效果图 像这样的一个带过渡效果的小部件在我们实际开发中的应用几率还是比较大的,但是在开发微信小程序的过程中可能有的小伙伴发现transition这个属性它不好使(下面说明)所以我们这…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信