删除必填字段的默认红色边框

Question

我在表单中有一些必填字段.对于必填字段,我希望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米):

<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/

Answer 1

IE中这种丑陋的外观是由outline属性引起的.你可以用它删除它:

input:required:invalid {
    outline: none;
}