css 使用 :placeholder-shown校验空值、提示不能为空

简介: css 使用 :placeholder-shown校验空值、提示不能为空

实现原理:

因placeholder内容只在空值状态的时候才显示,所以可以借助:placeholder-shown伪类来判断一个输入框中是否有值。

<template>
  <div style="padding:30px">
    <label for="">短信名称:</label>
    <input placeholder=" " /> <small></small>
    <br />
    <br />
    <label for="">短信内容:</label>
    <textarea placeholder=" "></textarea> <small></small>
  </div>
</template>

<style scoped>
textarea:placeholder-shown + small::before,
input:placeholder-shown + small::before {
  content: "不能为空!";
  color: red;
  font-size: 87.5%;
}
</style>

目录
相关文章
|
机器学习/深度学习 前端开发 JavaScript
|
2月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)
|
3天前
|
前端开发 数据安全/隐私保护 容器
HTML+CSS 水滴登录页
该代码实现了一个创意的水滴登录页面,包含一个水滴形状的登录框与两个按钮(忘记密码和注册)。登录框包括用户名、密码输入框及登录按钮。页面设计独特,采用渐变色与动态效果,增强了交互性和视觉美感。以下为关键实现步骤: - 重置默认样式。 - 设置页面背景颜色和尺寸。 - 定义登录表单容器的布局、位置和尺寸。 - 设置登录表单内容样式,包括3D效果和过渡动画。 - 创建伪元素增强水滴效果。 - 设定输入框容器和输入框样式。 - 为提交按钮、忘记密码和注册按钮设定特定样式,并添加悬停效果。
|
22天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
2月前
|
前端开发 JavaScript
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
|
2月前
|
前端开发 JavaScript
HTML+CSS助你轻松打造惊艳登录页,零基础也能学会!
HTML+CSS助你轻松打造惊艳登录页,零基础也能学会!
HTML+CSS 实现带轮播图的企业官网页面(记得收藏)
HTML+CSS 实现带轮播图的企业官网页面(记得收藏)
HTML+CSS 星空闪烁登录页面(记得收藏)
HTML+CSS 星空闪烁登录页面(记得收藏)
|
2月前
|
前端开发
html+css 实现产品小米产品展示效果(记得收藏)
html+css 实现产品小米产品展示效果(记得收藏)