开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

active input表单显示标签-纯css解决方案

基础概念

Active input 表单显示标签通常指的是在用户输入时，标签（label）能够动态地改变其显示状态，例如从静态文本变为浮动提示，以提高用户体验。纯 CSS 解决方案意味着不使用 JavaScript 或其他脚本语言，仅通过 CSS 的特性来实现这一效果。

相关优势

简洁性：纯 CSS 解决方案代码量少，易于维护。
性能：不需要额外的 JavaScript 文件加载，减少页面加载时间。
兼容性：大多数现代浏览器都支持 CSS3 及以上特性，兼容性较好。

类型

浮动标签（Floating Label）：当用户开始输入时，标签会浮动到输入框上方。
内联标签（Inline Label）：标签始终显示在输入框内，当用户输入时，标签会变得半透明。
隐藏标签（Hidden Label）：当用户开始输入时，标签完全隐藏。

应用场景

登录表单
注册表单
搜索框
任何需要用户输入的表单元素

示例代码

以下是一个使用纯 CSS 实现浮动标签效果的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Active Input Form</title>
    <style>
        .form-group {
            position: relative;
            margin-bottom: 1.5rem;
        }
        .form-label {
            position: absolute;
            pointer-events: none;
            left: 10px;
            top: 10px;
            transition: all 0.2s ease-in-out;
        }
        .form-control:focus + .form-label,
        .form-control:not(:placeholder-shown) + .form-label {
            font-size: 0.8rem;
            top: -10px;
            color: #007bff;
        }
        .form-control {
            padding-top: 1.5rem;
            padding-bottom: 0.5rem;
        }
    </style>
</head>
<body>
    <form>
        <div class="form-group">
            <input type="text" class="form-control" id="username" placeholder=" ">
            <label for="username" class="form-label">Username</label>
        </div>
        <div class="form-group">
            <input type="email" class="form-control" id="email" placeholder=" ">
            <label for="email" class="form-label">Email</label>
        </div>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

参考链接

CSS-Tricks: Floating Labels

常见问题及解决方法

标签不浮动：
- 确保输入框（.form-control）和标签（.form-label）在同一个 .form-group 容器内。
- 检查 CSS 选择器是否正确，特别是 :focus 和 :not(:placeholder-shown) 伪类。

标签位置不正确：
- 调整 .form-label 的 left 和 top 属性，确保标签初始位置正确。
- 使用 transition 属性平滑过渡标签位置变化。
浏览器兼容性：
- 确保使用现代浏览器，如 Chrome、Firefox、Safari 等。
- 对于旧版浏览器，可以考虑使用 JavaScript 作为后备方案。

通过以上方法，你可以实现一个纯 CSS 的 active input 表单显示标签效果，并解决常见的实现问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

简易登录页面实现

然后，在标签中，我们设置了页面的标题，并通过标签引入了Bootstrap的CSS文件，以应用样式。...该函数的作用是切换显示不同的登录选项内容，并给当前选中的按钮添加active类，同时移除其他按钮的active类。...-- 其他登录选项... --> 每个登录选项的表单都使用了标签，通过action和method属性指定了表单的处理URL和提交方式。...通过标签引入了Bootstrap的CSS文件，这样页面的样式可以使用Bootstrap框架提供的样式。...函数的作用是切换显示不同的登录选项内容，并给当前选中的按钮添加active类，同时移除其他按钮的active类。

2343 0

Web 框架的替代方案

但是，如果我们根本没有这些代码，而是用 CSS 来隐藏和显示错误标签呢？...如果标签被显示或隐藏，你可以在开发工具的样式面板中看到原因，它显示了整个级联，即最终导致标签可见（或隐藏）的规则链。...在上一节的错误标签示例中，我们展示了如何反应性地显示和隐藏错误信息。...与 CSS 的反应性完整的 CSS 文件可以供你查看。 CSS 处理了规范中的很多要求（做了一些有利于无障碍的修正）。我们来看看一些示例。根据规范，“X”（destroy）按钮只在悬停时显示。...:read-only) { … } 过滤（即只显示活动的和已完成的任务）是用选择器完成的： input[name="filter"][value="active"] ~ * .task :is

2.6K1 0

简易登录页面实现

然后，在标签中，我们设置了页面的标题，并通过标签引入了Bootstrap的CSS文件，以应用样式。...该函数的作用是切换显示不同的登录选项内容，并给当前选中的按钮添加active类，同时移除其他按钮的active类。...-- 其他登录选项... --> 每个登录选项的表单都使用了标签，通过action和method属性指定了表单的处理URL和提交方式。...通过标签引入了Bootstrap的CSS文件，这样页面的样式可以使用Bootstrap框架提供的样式。...函数的作用是切换显示不同的登录选项内容，并给当前选中的按钮添加active类，同时移除其他按钮的active类。

2712 0

前端之form表单与css（1）

一、form表单 form表单用于用户界面向服务器传输数据，实现用户和web服务器的交互。表单包含input系列标签如文本字段、复选框、单选框、提交按钮等。...checked，当属性名和属性值相同时可以只写属性值） value：表单提交时对应项的值 type="button", "reset", "submit"时，为按钮上显示的文本年内容 type="text..." cols="100" rows="10"> 二、CSS 2.1css介绍 css（cascading style sheet，层叠样式表）定义如何显示HTML元素。...如：link可以放在head标签对和body标签对里面 2.4css选择器 css选择器就是使用css对HTML页面中的元素实现一对一...*/ a:hover { color:red; } /*当鼠标点击且没有放开时链接的颜色*/ a:active{

1.9K1 0

第123天：移动web开发中的常见问题

在做移动端页面时，会发现所有a标签在触发点击时或者所有设置了伪类:active的元素，默认都会在激活状态时，显示高亮框，如果不想要这个高亮，那么你可以通过css以下方法来进行全局的禁止： html {...对于此类问题还有个办法，不使用a或者input标签，直接用div标签。 winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉？....css{-webkit-appearance:none;} webkit表单输入框placeholder的颜色值能改变么？...表单输入框placeholder的文字能换行么？...移动端触摸按钮的效果，可明示用户有些事情正要发生，是一个比较好体验，但是移动设备中并没有鼠标指针，使用css的hover并不能满足我们的需求，还好国外有个激活css的active效果，代码如下： <html

1.5K2 0

谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

8、纯CSS的导航栏Tab切换方案不用 Javascript，使用纯 CSS 方案，实现类似下图的导航栏切换： ?...Demo戳我：纯CSS导航切换(:target伪类实现) 法二： && 上面的方法通过添加标签添加页面锚点的方式接收点击事件...这里还有一种方式能够接收到点击事件，就是拥有 checked 属性的表单元素，或者。...label 标签中的 for 定义：for 属性规定 label 与哪个表单元素绑定。...看看最后的结果： Demo戳我：纯CSS导航切换(label 绑定 input:radio && ~) 所有题目汇总在我的 Github ，发到博客希望得到更多的交流。

1.7K2 0

HTML+CSS纯干货就业前基础到精通系统学习201693

1：HTML纯干货学习后的达到的效果（1）：会使用HTML的基本结构，创建网页（2）：会使用文本字体相关标签，实现文字修饰和布局（3）：会使用图像、超链接相关标签，实现图文并茂的页面（4）：会使用表格相关标签...，实现简单表格，跨行、跨列的复杂表格，并对表格进行美化修饰（5）：会使用表单及表单元素标签，实现表单页面的制作（6）：理解post和get两种提交方式的区别 2：HTML的基本结构 2.1：标题和其他说明信息...表单的典型应用：注册用户收集信息反馈信息为网站提供搜索工具表单中包含的表单元素：单行文本输入框(TEXT) <INPUT type=“text ” value="张三" size="20"...纯干货学习后的达到的效果(CSS层叠样式表) （1）：会创建统一外观的字体（2）：文本会创建无下划线的超连接样式（3）：会创建个性化的表格（4）：会创建个性化的表单（5）：会使用DIV实现页面布局...（6）：CSS样式表 HTML标签的外观样式比较单一颜色只有黑白字体类型和大小无变化 CSS（Cascade Style Sheets）级联/层叠样式表作用： HTML页面的美化（相当于华丽的衣服

4.1K9 0

HTML+CSS基础到精通系统学习

1：HTML纯干货学习后的达到的效果（1）：会使用HTML的基本结构，创建网页（2）：会使用文本字体相关标签，实现文字修饰和布局（3）：会使用图像、超链接相关标签，实现图文并茂的页面...（4）：会使用表格相关标签，实现简单表格，跨行、跨列的复杂表格，并对表格进行美化修饰（5）：会使用表单及表单元素标签，实现表单页面的制作（6）：理解post和get两种提交方式的区别...表单的典型应用：注册用户收集信息反馈信息为网站提供搜索工具表单中包含的表单元素：单行文本输入框(TEXT) <INPUT type=“text ” value...纯干货学习后的达到的效果(CSS层叠样式表) （1）：会创建统一外观的字体（2）：文本会创建无下划线的超连接样式（3）：会创建个性化的表格（4）：会创建个性化的表单（5）：...标签： 1）如果有多种样式，如果规定的样式没有冲突，则叠加； 2）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示

3.2K5 0

iOS开关按钮，纯CSS给你安排上了

前言今早搭完电梯出来信号不太好，切换飞行模式重启信号，发现iOS的「开关按钮」挺好玩的，顺便用纯CSS实现一番。 ? ? 思路外观按钮，顾名思义就是可点击触发某些事件的组件。...在HTML众多标签中可用、、和作为载体。在四个常用标签中只有和存在鼠标触发事件的状态，因此只能从它俩中选择。...「a」：:link、:visited、:hover、:active 「input」：:checked 的HTML语义是「anchor」，代表超链接，提供的全部选择器用于捕获超链接的触发状态。...的HTML语义是「input」，类型设置为radio或checkbox时代表选择表单，提供的选择器:checked用于捕获选择表单是否被选中。...非常贴切今天的主题：「iOS开关按钮，纯CSS给你安排上了」。 ? 整体源码如下。

1.7K5 1

框架究竟解决了啥问题？我们可以脱离它们吗？

但是如果我们根本没有这样的代码，而是直接使用 CSS 来隐藏和显示错误标签呢？...标签是显示还是隐藏，你可以在开发人员工具的样式面板中很清晰的看到原因。先不说这篇文章的场景，就算你在使用框架的时候，考虑使用 CSS 保持 DOM 稳定和更改状态的想法也是非常不错的。...这不仅包括 Input ，还包括其他表单元素，如 output、textarea 和 fieldset，它们允许嵌套访问树中的元素。在前面的错误标签示例中，我们展示了如何响应式地显示和隐藏错误消息。...CSS 的响应式 CSS 处理了规范中的很多要求，我们看几个例子：根据规范，“X”（destroy）按钮只会在鼠标悬停时显示。...) { … } 过滤操作（即仅显示未完成和已完成的任务）是使用选择器完成的： input[name="filter"][value="active"] ~ * .task :is(input

7.9K3 0

【HTML | CSS | JS】耗时一下午，整理出了一个精美的响应式登陆注册表单（附源码）

登陆注册表单样式设计 HTML源码 CSS源码【登录】|【注册】表单切换设计 JAVASCRIPT源码响应式布局设计 CSS源码完整源码写在最后的话 ---- 前言...复制整个源码到一个HTML文件中即可完整显示注册表单效果图！最后：代码中有许多可以添加链接的地方都设置为空了，小伙伴们可以根据需要自行添加！ ... 采取HTML+CSS样式可以设计出登陆注册表单的样式，因为还没有加入JAVASCRIPT代码，所以暂时只能显示登录表单，无法显示注册表单；并且图片的轮转还不能实现（如下gif图所示，任何点选操作无作用...嵌入到标签之中，可以实现【登录】|【注册】表单切换设计和图片【文字】的轮换设计，加入JAVASCRIPT代码后登陆注册表单便可以动起来了！ ...CSS源码复制如下源码粘贴到标签之间，便可实现多分辨率下的完美显示！

1.1K2 0

前端面试题2（CSS）

新增各种CSS选择器（: not(.input)：所有 class 不是“input”的节点）圆角（border-radius:8px）多列布局（multi-column...在 CSS 中伪类一直用 : 表示，如 :hover, :active 等伪元素在CSS1中已存在，当时语法是用 : 表示，如 :before 和 :after 后来在CSS3中修订，伪元素用 ::...产生原因：由于Chrome默认会给自动填充的input表单加上 input:-webkit-autofill 私有属性造成的 解决方案1：在form标签上直接关闭了表单的自动填充：autocomplete...="off" 解决方案2：input:-webkit-autofill { background-color: transparent; } input [type=search] 搜索框右侧小图标如何美化...（带单位、纯数字、百分比）带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高纯数字：会把比例传递给后代。

2.8K1 1

Angular 2 表单（下）

元素都有一个 id 属性，它被 label 元素的 for 属性用来把标签匹配到对应的 input 。...每一个 input 元素都有一个 name 属性， Angular 的表单模块需要使用它为表单注册控制器。运行以上实例输出结果如下： {{diagnostic}} 只是用于测试时候输出数据使用。...在 angular-forms 目录下创建 forms.css 文件，代码如下： forms.css 文件： .ng-valid[required], .ng-valid.required { border-left...删除掉 name 字段的数据，显示结果如下所示：添加一个网站接下来我们创建一个用于添加网站的表单，在 app/site-form.component.html 添加一个按钮： app/site-form.component.html...= true; newSite() { this.model = new Site(5, '', ''); this.active = false; setTimeout(() => this.active

1.7K1 0

前端(四)-jQuery

") 对单个css属性赋值 $("选择器").css({"属性名称"："属性值"，"属性名称"："属性值"}) 对多个css属性赋值 2.7 $(this).find("标签名") $(this)就是将这个...dom对象转换成jquery对象，就可以对这个对象进行操作；可以查找当前元素下的子元素； html //当鼠标访问指定的li时，指定的li下的p标签显示，鼠标移除后，对应的p消失 ...,随着鼠标的点击自动切换函数 $("input[type=button]").toggle( function(){ $("body").css("background-color"..." value="显示" id="showImg"> <img src="img/...required 自定义<em>表单</em>的<em>input</em><em>标签</em>必须添加required属性，否则就不会触发； //自定义用户名校验提示语，对浏览器默认提示语，进行统一修改 $("input[type=submit]")

8.5K3 0

超全整理前端开发面试题——CSS篇（2016年）

：）用纯CSS创建一个三角形的原理是什么？...解决方案是加一个全局的*{margin:0;padding:0;}来统一。 * IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。...浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;} 这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入...为什么要初始化CSS样式。 - 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。...style标签写在body后与body前有什么区别？什么是CSS 预处理器 / 后处理器？

2.6K13 0

3种纯CSS方式实现Tab 切换

前言 Tab 切换是种很常见的网页呈现形式，不管是PC或者H5都会经常看到，今天就为小伙伴们提供多种纯CSS Tab 切换的实现方式，同时对比一下那种代码更方便，更通俗易懂。 ?...纯CSS实现都面临2个问题： 1、如何接收点击事件？ 2、如何操作相关DOM？...checked 伪类实现纯 CSS Tab 切换拥有 checked 属性的表单元素，或者能够接收到点击事件...知识点: 1、使用 radio 标签的 :checked 伪类，加上实现纯 CSS 捕获点击事情 2、使用了 ~ 选择符对样式进行控制 .container...margin: 0; } .container { position: relative; width: 400px; margin: 50px auto; } .container input

4.5K2 1

bootstrap快速入门笔记（七）-表格,表单

**跨浏览器兼容性：条纹状表格是依赖 :nth-child CSS 选择器实现的，而这一功能不被 Internet Explorer 8 支持。...b,一定要添加 label 标签: 3,水平排列的表单.form-horizontal 类:联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。...2），输入控件组：如需在文本输入域前面或后面添加文本内容或按钮控件，请参考输入控件组。　　3），文本域：支持多行文本的表单控件。可根据需要改变 rows 属性。　　...5),下拉列表（select）：对于标记了 multiple 属性的控件来说，默认显示多选项。... 1 　　6)，静态控件：如果需要在表单中将一行纯文本和 label 元素放置于同一行

3K3 0

BootStrap应用开发学习入门

.sr-only #可以隐藏内联表单的标签 label标签 .control-label #控制label标签 label标签 .form-control #表单与其组件显示样式（常用输入框焦点....form-control-static #在一个水平表单内的表单标签后放置纯文本时 .help-block #灰色显示表单帮助文本标签 #验证状态 .has-warning、 .has-error...---使用 class .sr-only，您可以隐藏内联表单的标签。....bs-example #form标签输入组表单样式 .bs-example-form #form标签 .input-group #div 输入组 .input-group-addon...active" role="button">a标签锚按钮 <!

17.5K2 0

使用 CSS Checkbox Hack 技术纯手工撸一个手风琴组件

这里运用的是：checked 伪类选择器，其意思就是“如果选中了表单（复选框、单选按钮），则应用相关样式规则” 我们通常隐藏表单控件，然后结合标签来控制复选框或单选框的选择，制作一些特殊的效果...这里的关键所在就是这个标签，尤其是 for 这属性，指向对应表单的id的属性。... 标签不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此对应的表单控件。...就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。这就是这个案例的关键所在，让我们能在选项卡直接进行切换。...2、定义相关样式准备好上述的HTML基本结构后，我们来定义相关的样式，首先我们需要隐藏上述的几个单选按钮表单，我们可以使用 left 属性，将其移除屏幕显示区域，示例代码如下： ?

3.2K2 0

BootStrap应用开发学习入门

.sr-only #可以隐藏内联表单的标签 label标签 .control-label #控制label标签 label标签 .form-control #表单与其组件显示样式（常用输入框焦点....form-control-static #在一个水平表单内的表单标签后放置纯文本时 .help-block #灰色显示表单帮助文本标签 #验证状态 .has-warning、 .has-error...---使用 class .sr-only，您可以隐藏内联表单的标签。....bs-example #form标签输入组表单样式 .bs-example-form #form标签 .input-group #div 输入组 .input-group-addon...active" role="button">a标签锚按钮 <!

14.6K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭