尽管我删除了它，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 {

   border ... 

}