css - 表单内处于错误状态的语义 UI 输入元素

Question

看看 example for an input in error state 。正如您所看到的，一旦 CSS 将 ui input error 作为类，它就会使输入显示错误样式。 然而，当放置在 ui 表单(我认为这是一个非常常见的用例)中时，完全相同的类会被来自 ui 表单 的更具体的选择器所否决: .ui.form 输入[type=...]。导致 error 类根本不起作用。

我确实尝试将 error 作为状态添加到父 form div 中 - 没有效果。到父段 - 没有效果。

演示显示没有表单的工作版本:https://jsfiddle.net/hahz35ka/

演示显示非工作版本，格式为:https://jsfiddle.net/hahz35ka/1/

为什么？表单内有错误的输入的假定用途是什么？

Answer 1

在表单中执行错误状态的正确方法是将输入包装在 <div> 中与 .field .error类如下:

[demo]

<div class="ui form">
    <div class="ui input">
        <div class="field error">
          <input placeholder="Search..." type="text">
        </div>
  </div>
</div>

查看Form Validation了解更多详情