CSS border-image 实现输入框验证提示实例页面

CSS代码：

[type="email"] {
    width: 240px;
    padding: 10px;
    font-size: 100%;
    border: 1px solid transparent;
    background: #fff;
    box-shadow: inset 0 0 0 1px #ccc;
    outline: none;
    --valid: url("data:image/svg+xml,%3Csvg...'/%3E%3C/svg%3E");
    --invalid: url("data:image/svg+xml,%3Csvg...%3E%3C/svg%3E");
}
[type="email"]:focus {
    box-shadow: inset 0 0 0 1px #2a80eb;
}
.use-border {
    /* 20px 图标尺寸，272 是输入框长度 262 + 10px 偏移 */
    border-image: 0 fill / 9 0 9 272 / 0 30px 0 0;
}
.use-border:valid {
    border-image-source: var(--valid);
}
.use-border:invalid:not(:placeholder-shown) {
    border-image-source: var(--invalid);
}
.use-background {
    border-right-width: 30px;
    background: no-repeat right / 20px 20px;
    background-origin: border-box;
}
.use-background:valid {
    background-image: var(--valid);
}
.use-background:invalid:not(:placeholder-shown) {
    background-image: var(--invalid);
}

HTML代码：

<h4>border-image 实现</h4>
邮箱：<input type="email" class="use-border" placeholder="输入邮箱观察变化" required>

<h4>background-image 模拟</h4>
邮箱：<input type="email" class="use-background" placeholder="输入邮箱观察变化" required>