Question

鉴于我有以下html位：

＆＃13;

form p label {
    display: block;
    float: left;
    font-size: 14px;
    color: green;
}

#myField.error {
  content: 'validation error occurred';
  display: block;
}

＆＃13;

<form>
<div id="myField">
  <p class="required">
      <label for="username">Username:</label>
      <input type="text" name="username" id="username" class="error" maxlength="10" value="" title="Username" required />
  </p>
</div>
</form>

＆＃13;

如何在输入字段上方显示验证错误消息，向右浮动？我不想手动修改html代码。但是，使用jquery或js添加一些span标记很好。总而言之，css解决方案是首选。

Answer 1

我对你的html做了一些小改动，把错误类从输入移到了p元素。在css中使用::之前的CSS伪元素（并自由为输入添加红色边框，并为错误消息添加红色）

form p label {
    display: block;
    float: left;
    font-size: 14px;
    color: green;
}

#myField .error::before {
  content: 'validation error occurred';
  position: absolute;
  top: -4px;
  color: red;
}

#myField .error input {
  border-color: red;
}

<form>
<div id="myField">
  <p class="required error">
      <label for="username">Username:</label>
      <input type="text" name="username" id="username" class="" maxlength="10" value="" title="Username" required />
  </p>
</div>
</form>

JS Fiddle link for this code

css在输入字段上方显示验证消息

1 个答案: