尽管我删除了它，Firefox 仍然保留一个带有红色边框的输入字段

Question

我正在处理一个项目，该项目要求我让用户在模态视图中插入一些数据，然后保存它。

整个过程必须经过验证过程，如果发现任何类型的错误，它将使用以下 CSS 片段突出显示框。

.erroreEvidenziato {

    border: 1px solid red;

}

模态视图的 HTML 代码如下所示

<div id=nuovaAssociazione class="modal">

  <div class="modal-content small smallModalAgency">

    <div class="title">

      <span class="info">

          <em>* </em> {{#i18n}}mandatoryField{{/i18n}}

      </span>

      <h3 id="titoloModale"></h3>

      <input type="hidden" id="idAgency" value="">

    </div>

    <div id="message" class="erroreModaleDiv" style="display:none;">

      <span class="error">{{#i18n}}overlappingDates{{/i18n}}</span>

    </div>

    <table class="modify">

      <tr>

        <td class="label">{{#i18n}}agencyName{{/i18n}}

          <span class="error-drop errorModaleAgency" id="selezioneAgency" style="display:none;">{{#i18n}}mandatoryField{{/i18n}}</span>

        </td>

        <td><input name="agency" style="width:330px;height:25px;" maxlength="35" id="agency">

          <div id="test"></div>

        </td>

        <td><input type="hidden" id="supplier_id" name="supplier_id" {{#supplier_id}}value="{{supplier_id}}" {{/supplier_id}}/></td>

      </tr>

      <tr>

        <td class="label">{{#i18n}}agencyPort{{/i18n}}

          <span class="error-drop errorModaleAgency" id="selezionePorto" style="display:none;">{{#i18n}}mandatoryField{{/i18n}}</span>

        </td>

        <td>

          <select name="porto" class="select2" maxlength="35" id="porto">

            <option value="">...</option>

            {{#porti}}

            <option value="{{portcode}}">{{portname}}</option>

            {{/porti}}

          </select>

        </td>

      </tr>

      <tr>

        <td class="label">{{#i18n}}agencyDivision{{/i18n}}

          <span class="error-drop errorModaleAgency" id="selezioneBuyergroup" style="display:none;">{{#i18n}}mandatoryField{{/i18n}}</span>

        </td>

这就是模态的样子

Answer 1

该required属性可能会导致浏览器验证字段并将其自己的 css 放在上面。如果您使用自定义验证，那么您可能需要删除此属性以阻止浏览器也验证它或者，您可以使用以下内容覆盖样式：input:invalid {&nbsp; &nbsp;border ...&nbsp;}