Question

有没有办法在不使用JavaScript的情况下根据HTML元素的属性（不是基于元素的属性）应用CSS类？

例如，请考虑以下输入元素：

<input type="text" id="txtName" class="form-field__input" name="txtName" value="">

当用户与上述元素交互并输入一些文本时，其值为＆＃34;值＆＃34;财产得到更新;但＆＃34;价值＆＃34;属性保持空白。无论如何我们可以在CSS中访问元素的属性吗？我知道有可能更新＆＃34;价值＆＃34;使用JavaScript属性，然后使用属性选择器更新样式;但有没有办法只使用CSS选择器实现这一目标？

为了澄清，我并不关心输入是否有效，我只想检查内容的可用性，如果内容存在，那么＆＃34; any-css-rule-1＆＃34;应该被应用，否则＆＃34; any-css-rule-2＆＃34;。

Answer 1

您可以在required使用pattern和html属性; <{1}}，:valid :invalid个伪类，用于匹配特定的用户输入。

css

:valid + [for="txtName"]:after {
  content: "valid input";
  color: green;
}

:invalid + [for="txtName"]:after {
  content: "invalid input";
  color: red;
}

Answer 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

的链接

使用纯CSS表单输入验证

2 个答案: