HTML5+CSS3 为 input 添加一键删除按钮

经常可以看到一些 input 输入框在输入文字后，输入框末尾会出现一键删除的按钮

实现方式

基础布局

<input/> 末尾必须添加 required 标记，这是 HTML5 的验证标记
准备一个用于显示删除按钮的 DOM 元素，例如以下代码中的 <span/> ，图标自备

<div class="invite-code-panel"><input type="text" class="invite-code-input" placeholder="请输入实训计划邀请码/助飞码" required><span class="editable-clear-x"></span>
</div>

CSS 控制按钮显示

删除按钮默认隐藏
通过 :valid + 可以控制当 <input/> 输入内容后 <span/> 则显示

.invite-code-panel .editable-clear-x {right: 15px;display: none;
}.invite-code-panel .invite-code-input:valid + .editable-clear-x {display: inline;
}

注意点

需要注意的是如果没有为 <input/> 添加 required 标记，:valid + 属性则不会生效
本文只是实现了按钮的自动隐藏/显示，点击按钮后的删除操作需要通过 JS 自行实现

HTML5+CSS3 为 input 添加一键删除按钮相关推荐

如何在安卓的后台最近任务添加一键清除按钮
在安卓7.0之前,安卓默认是不带一键清除按钮的,只能通过左滑右滑清楚最近任务,本文为大家介绍如何在后台添加一个一键删除按钮,过程如下 1. 在RecentActivity界面添加一个button,点击 ...
wordpress怎么修改html,WordPress后台编辑器HTML模式界面中添加修改删除按钮
在WordPress编辑器HTML模式界面中添加按钮一文中,我大致介绍了怎么在后台添加一些自定义的按钮,本文则更为详细全面的对wordpress后台编辑器HTML模式下的按钮自定义进行详解,以让开发 ...
html页面按钮删除一条数据库,需要添加一个删除按钮到一个HTML表格从数据库中删除记录与消息...
IDNameCodeActiveEdit <?php foreach($nurseries->result() as $nursery) { ?> <?php echo $nu ...
HTML5+CSS3小实例：抽屉式分享按钮切换效果
HTML5+CSS3做一个抽屉式分享按钮切换效果,这个案例属于代码简单,效果惊艳,上手容易系列,主要用到的是 transition ,还有,字体图标用到的依然是 font-awesome. 效果: 源 ...
HTML5+CSS3小实例：云朵特效按钮
HTML5+CSS3做一个云朵特效按钮的悬停效果,代码简单,没什么难点,适合新手朋友拿来练手. 效果: 源码: <!DOCTYPE html> <html><head&g ...
jQuery动态添加、删除按钮及input输入框
效果图 div <tr><td class="column-title"><label>*******</label></td ...
uni app input添加获取验证码按钮_uni-app跨平台框架对微信小程序的无障碍支持探索...
uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.H5.以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝).快应用等多个平台. ...
uni app input添加获取验证码按钮_FILEX | 如何在UniSwap挖到UNI？
终于,UniSwap的币上线了,不过这一次不是直接通过挖矿获得,而是先给所有此前参加过UniSwap流动性挖矿和交易的用户分发了红利. 其中最少的账户拿到400个UNI左右,而提供流动性的账户获得的U ...
HTML5+CSS3小实例：水波纹按钮效果
实例:水波纹按钮效果技术栈:HTML.CSS 效果: 源码: [html] <!DOCTYPE html> <html><head><meta http-e ...

HTML5+CSS3 为 input 添加一键删除按钮

HTML5+CSS3 为 input 添加一键删除按钮

更多精彩

实现方式

基础布局

CSS 控制按钮显示

注意点

HTML5+CSS3 为 input 添加一键删除按钮相关推荐

最新文章

热门文章