最新消息:欢迎光临!

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

网站电商 爱分享 11浏览 0评论

经常可以看到一些 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 自行实现

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址