摆脱必填字段的默认红色边框答案

【问题标题】：Getting rid of default red border for required fields摆脱必填字段的默认红色边框
【发布时间】：2014-07-25 02:40:51
【问题描述】：

我在表单中有一些必填字段。对于必填字段，我希望在提交表单后使用 1px 红色边框突出显示表单字段。 Chrome 完美地做到了这一点。 IE 给默认和宽边框带来了麻烦。如何摆脱这些？

HTML源代码：

<div class="tableRow">
    <div class="tableCell fieldCaption borderBottom normalFontWeight">{{'_PHONE_'|i18n}}<span class="mandetory">*</span></div>
    <div class="tableCell fieldValue borderBottom">
        <input type="text" name="phoneValueInput" ng-class="{submitted:createCallBackForm.phoneValueInput.$invalid}" ng-model="taskDto.ContactPhoneNumber" placeholder="{{'_PHONE_NUMBER_'|i18n}}" required  validation-message="{{'_MSG_EMPTY_PHONE_NUMBER_'|i18n}}"/>
    </div>
</div>

CSS：

input.submitted.ng-invalid {
    border: red 1px solid;
}

提供给 IE 11 的代码：

<div class="tableRow">
    <div class="tableCell fieldCaption borderBottom normalFontWeight ng-binding">Telefoon<span class="mandetory">*</span></div>
    <div class="tableCell fieldValue borderBottom">
        <input name="phoneValueInput" class="ng-isolate-scope ng-invalid ng-invalid-required ng-dirty" style="margin-left: 10px;" required="" type="text" placeholder="Telefoonnummer" ng-model="taskDto.ContactPhoneNumber" ng-class="{submitted:createCallBackForm.phoneValueInput.$invalid}" validation-message="Telefoonnummer kan niet leeg zijn">
    </div>
</div>

提供给 Chrome 的代码（版本 35.0.1916.114 m）：

<div class="tableRow">
    <div class="tableCell fieldCaption borderBottom normalFontWeight ng-binding">Phone<span class="mandetory">*</span></div>
    <div class="tableCell fieldValue borderBottom">
        <input type="text" name="phoneValueInput" ng-class="{submitted:createCallBackForm.phoneValueInput.$invalid}" ng-model="taskDto.ContactPhoneNumber" placeholder="Phone Number" required="" validation-message="Phone number can not be empty" class="ng-isolate-scope ng-pristine ng-invalid ng-invalid-required">
    </div>
</div>

类似的场景可以在这里看到：http://jsfiddle.net/trixta/qTV3g/

【问题讨论】：

请发布 html 和 css，以便我们看看会发生什么。
创建小提琴/演示链接
@miguel-svq：请查看编辑。
@DevPat：我将创建并分享链接。
和IE一样，哪个版本的IE会出现这个问题？

标签： html angularjs internet-explorer

【解决方案1】：

1.当前场景的测试应用

这是我为您的场景创建的测试应用程序：Plunker1

以下 CSS 类已用于突出显示未通过验证的必填输入字段：

    .submitted input:invalid {
        border: red 1px solid; }

在 IE 10 和 Chrome 32 中运行它并没有达到预期的效果。默认 :invalid CSS 应用于无效字段。它不是来自用户定义的 CSS。这排除了 IE 和 Chrome 在主题场景中表现不同的可能性。

2。网络研究的启示

按照示例here，我在这里创建了另一个测试应用程序：Plunker2 这在 IE 10 和 Chrome 32 中都可以正常工作。

基本上，我们正在删除提交时的默认表单验证，并添加使用用户定义的 CSS 的自定义验证。

更改的 HTML：

    <button formnovalidate="" type="submit">Submit</button>

JavaScript

    document.addEventListener("DOMContentLoaded", function() {
        document.forms[0].addEventListener('submit',function(e){
            e.preventDefault();
            e.currentTarget.classList.add('submitted');
        });
    });

注意：您也可以使用window.onload 代替DOMContentLoaded 事件。

希望这有助于解决您面临的问题。

【讨论】：

+1 感谢您为解决我的问题所做的努力。我也没有应用表单验证就做到了。在这样做之前，我会尝试通过保留默认验证来做到这一点。无论如何谢谢:)

【解决方案2】：

在 IE 中这种丑陋的外观是由 outline 属性引起的。您可以使用以下命令将其删除：

input:required:invalid {
    outline: none;
}

【讨论】：

还有... textarea:required:invalid { outline: none; }

【解决方案3】：

试试

input:required:invalid{
outline-color:red;
outline-width:thin;
}

【讨论】：