前端 如何利用css3 特性 让 input 输入框有个叉叉x 能够删除整个input 框的内容 简单实用

本文主要是介绍前端 如何利用css3 特性 让 input 输入框有个叉叉x 能够删除整个input 框的内容 简单实用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

input框旁边的清空input按钮,我们一般在制作注册以及登录页面的时候会用到。一般的样子是这个样子滴:

 =》

我们要实现的功能是,在输入的时候,右侧的清空按钮显示出来,然后当删除input中的内容的时候,清空按钮也消失。

以前实现的时候,我用的是“keyup”事件。某一次在做触屏版的时候,不知怎么搞的就是触发不了事件,于是像一位牛人请教,get到了这个新技能:

首先看下这个布局的HTML:

<div class="input-box"><input required="required" type="text" class="name-input" placeholder="请输入昵称" /><a href="javascript:;" class="clear-input"><img src="images/icon-clear.png" class="clear-input-img" alt="" /></a>
</div>

实现这个功能很简单,出去基本的样式之外,再加上这样的样式就OK啦:

.name-input:valid + .clear-input {display: block;}

来解读一下~~

在Input后面放个清除的按钮;

:valid 选择器在表单元素的值需要根据指定条件验证时设置指定样式(这里要记得在input里面加上required="required",表示必须);

 +号 是兄弟选择器,.name-input:valid + .clear-input {display: block;}; 代表类名name-input 符合要求(required="required" 表示不为空,必须)时,兄弟元素.clear-input 显示  也就是输入框内有文字则x显示  否则不显示, 注意是相邻的兄弟元素,如果隔了一个是无效的

“clear-input”要先隐藏,这个隐藏不要写在行内样式上,否则无用。  

注意: 有兼容性问题,移动端放心用

这篇关于前端 如何利用css3 特性 让 input 输入框有个叉叉x 能够删除整个input 框的内容 简单实用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/846527

相关文章

Mysql表的简单操作(基本技能)

《Mysql表的简单操作(基本技能)》在数据库中,表的操作主要包括表的创建、查看、修改、删除等,了解如何操作这些表是数据库管理和开发的基本技能,本文给大家介绍Mysql表的简单操作,感兴趣的朋友一起看... 目录3.1 创建表 3.2 查看表结构3.3 修改表3.4 实践案例:修改表在数据库中,表的操作主要

macOS无效Launchpad图标轻松删除的4 种实用方法

《macOS无效Launchpad图标轻松删除的4种实用方法》mac中不在appstore上下载的应用经常在删除后它的图标还残留在launchpad中,并且长按图标也不会出现删除符号,下面解决这个问... 在 MACOS 上,Launchpad(也就是「启动台」)是一个便捷的 App 启动工具。但有时候,应

springboot简单集成Security配置的教程

《springboot简单集成Security配置的教程》:本文主要介绍springboot简单集成Security配置的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录集成Security安全框架引入依赖编写配置类WebSecurityConfig(自定义资源权限规则

Mysql删除几亿条数据表中的部分数据的方法实现

《Mysql删除几亿条数据表中的部分数据的方法实现》在MySQL中删除一个大表中的数据时,需要特别注意操作的性能和对系统的影响,本文主要介绍了Mysql删除几亿条数据表中的部分数据的方法实现,具有一定... 目录1、需求2、方案1. 使用 DELETE 语句分批删除2. 使用 INPLACE ALTER T

新特性抢先看! Ubuntu 25.04 Beta 发布:Linux 6.14 内核

《新特性抢先看!Ubuntu25.04Beta发布:Linux6.14内核》Canonical公司近日发布了Ubuntu25.04Beta版,这一版本被赋予了一个活泼的代号——“Plu... Canonical 昨日(3 月 27 日)放出了 Beta 版 Ubuntu 25.04 系统镜像,代号“Pluc

使用Python实现获取网页指定内容

《使用Python实现获取网页指定内容》在当今互联网时代,网页数据抓取是一项非常重要的技能,本文将带你从零开始学习如何使用Python获取网页中的指定内容,希望对大家有所帮助... 目录引言1. 网页抓取的基本概念2. python中的网页抓取库3. 安装必要的库4. 发送HTTP请求并获取网页内容5. 解

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

如何使用Python实现一个简单的window任务管理器

《如何使用Python实现一个简单的window任务管理器》这篇文章主要为大家详细介绍了如何使用Python实现一个简单的window任务管理器,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起... 任务管理器效果图完整代码import tkinter as tkfrom tkinter i

C++从序列容器中删除元素的四种方法

《C++从序列容器中删除元素的四种方法》删除元素的方法在序列容器和关联容器之间是非常不同的,在序列容器中,vector和string是最常用的,但这里也会介绍deque和list以供全面了解,尽管在一... 目录一、简介二、移除给定位置的元素三、移除与某个值相等的元素3.1、序列容器vector、deque