Question

我有一个表单，其中所有输入字段都有'required'和'pattern'参数。

我想在输入框的右侧显示一个绿色的小图片，只要输入无效，就向用户显示他已正确填充它。

我想知道是否可以不使用javascript / jquery，而是使用纯css / sass？

我在想像

这样的东西

if input:invalid{
    .divonrightofinputbox{
    background:url('green.png');
    }
}else{
    .divonrightofinputbox{
    display:none;
    }
}

是否可以使用sass，如果是这样，怎么样？：）

提前感谢您的帮助！

Answer 1

Sass对文档或表单状态一无所知。你只需要使用CSS提供的东西：

input {
    &:required {
        + .div-after-the-input {
            // required styles
        }
    }

    &:invalid, &:out-of-range {
        + .div-after-the-input {
            background: url('invalid.png') no-repeat;
        }
    }

    &:valid, &:in-range {
        + .div-after-the-input {
            display: none;
        }
    }
}

使用SASS进行HTML表单验证？

1 个答案: