有没有什么方法可以在不使用 JavaScript 的情况下基于 HTML 元素的属性(而不是基于元素的属性)应用 CSS 类?
例如,考虑下面的输入元素:
<input type="text" id="txtName" class="form-field__input" name="txtName" value="">
当用户与上述元素交互并输入一些文本时,其“值”属性会更新;但“值”属性仍然为空。我们可以通过任何方式在 CSS 中访问元素的属性吗?我知道可以使用 JavaScript 更新“值”属性,然后使用属性选择器更新样式;但是有什么方法可以仅使用 CSS 选择器来实现这一点吗?
澄清一下,我不关心输入是否有效,我只想检查内容的可用性,如果内容存在,则应应用“any-css-rule-1”,否则“任何 css-rule-2”。
最佳答案
您可以结合使用 HTML5 和 CSS3 功能来实现它。这是我的示例代码:
HTML:
<form action="#" class="contact-us-form" onsubmit="submitClick()">
<input type="text" placeholder="First Name" required>
<input type="text" placeholder="Last name">
<input type="email" placeholder="Email" required>
<input type="submit"/>
</form>
<p id="demo"></p>
SCSS:
.contact-us-form {
display: flex;
padding-bottom: 1.25em;
flex-direction: column;
.text-field {
margin: 0.5em;
}
.button-submit {
margin: 1em;
width: 100px;
float: right;
}
input[type="text"],
input[type="email"] {
margin: 0.5em;
height: 2em;
min-width: 125px;
border: 1px solid #eee;
border-left: 3px solid;
border-radius: 4px;
transition: border-color 0.5s ease-out;
&:optional {
border-left-color: #999;
}
&:required {
border-left-color: red;
}
&:invalid {
border-left-color: salmon;
}
}
}
JavaScript
function submitClick() {
alert("Your data has been saved");
}
这是 JSFiddle 的链接
关于javascript - 使用纯 CSS 的表单输入验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43957883/