时间戳

首页 > 解决方案 > 如果输入验证失败，则在没有 js 的情况下更改标签的颜色

html - 如果输入验证失败，则在没有 js 的情况下更改标签的颜色

问题描述

我有一个带有标签和输入类型=文本的表单。我正在使用 pattern="" 来验证文本，并在验证失败时在文本输入下显示一条消息。我希望能够更改标签的颜色以及文本输入中的文本，但似乎无法实现。这就是我到目前为止所拥有的。我不想使用js。

               <div class="form-group address">
                <label for="address" class="form-group__names" id="invalid">Address</label>
                <input type="text" name="address" pattern="^\d+\s[A-z]+\s[A-z]+,\s+[A-z]+,\s+[A-z] 
                {2}\s+\d{5}" />
                <b></b>
              </div>

            .form-group input:invalid + b:before {
             content: "Form is invalid";
             color: red;
            }

             input[type="text"]:invalid + label#invalid {
             color: red;
            }

标签： htmlcssvalidation

解决方案

CSS有通用的兄弟组合器~和相邻的兄弟组合器+，它们都不能选择前一个兄弟元素。因此你必须改变你的元素的顺序，所以输入是第一位的。这是一种方法：

.form-group input:invalid+b:before {
  content: "Form is invalid";
  color: red;
}

input[type="text"]:invalid~label {
  color: red;
}

.address {
  position: relative;
  padding-left: 100px;
}

.address label {
  position: absolute;
  left: 0;
  line-height: 30px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="form-group address">
    <input type="text" id="address" name="address" pattern="^\d+\s[A-z]+\s[A-z]+,\s+[A-z]+,\s+[A-z]{2}\s+\d{5}" />
    <b></b>
    <label for="address" class="form-group__names" id="invalid">Address</label>
  </div>
</div>

同样在JSFiddle

推荐阅读