Question

重要：我不想出于可访问性（a11y）的目的自定义/删除焦点样式。基本上是impossible to mimic all the different focus styles of browsers/operating systems

自定义输入/文本区域的外观可将元素聚焦时删除轮廓样式。还会添加奇怪的边框等。

此行为背后的原因是什么，我认为它破坏了可访问性？在修改简单的CSS属性（例如背景，边框颜色等）时，如何不覆盖焦点样式？

我在Firefox Mac和IE 11（Chrome可以正常工作）上进行了测试，也许其他浏览器的行为相同。以下是在浏览器中尝试使用的Codepen：https://codepen.io/lbineau/pen/dLgwoo

<label for="customized-input">Customized input</label>
<input id="customized-input" type="text" />

<label for="native-input">Native input</label>
<input id="native-input" type="text" />

预期结果：即使自定义输入边框，也应显示默认轮廓。

实际结果：当输入集中时，轮廓不会出现。

Answer 1

我不知道背后的原因。

但是您可以使用以下代码覆盖它：

#customized-input:-moz-focusring {
  outline: Highlight solid 1px; 
}

Answer 2

如果要更改的元素css是同级，则可以这样使用

        <label class="label-class" for="customized-input">Customized input</label>
        <input id="customized-input" type="text" />

        
  .customized-input:focus ~.label-class {
        &::before {
            border:1px solid red;
            height:40px;
            width: 40px;
       
  }
}

如何在不删除Firefox / IE轮廓的情况下自定义输入边框

2 个答案: