版权声明：本文首发 http://asing1elife.com ，转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82876672
通过 HTML5 + CSS3 可以实现 input 中有无内容的友好提示
更多精彩
- 更多技术博客，请移步 asing1elife’s blog
方式
定义 input 标签并在后面跟上 span 标签
- input 标签中必须指定 required 属性
<input type="number" name="age" min="0" required><span class="inputTip"></span>
为 input 标签编写动态 css 样式
- 当 input 中没有内容时其对应的伪类标签为 invalid
- 当 input 中存在内容时其对应的伪类标签为 valid
<style type="text/css">
input:invalid+span::after {
content: "";
padding-left: 10px;
}
input:valid+span::after {
content: "";
padding-left: 10px;
}
</style>
