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

Question

重要提示：我不想为可访问性（a11y）目的自定义/删除焦点样式。基本上不可能模仿浏览器/操作系统的所有不同焦点样式

自定义输入/文本区域的外观会在元素获得焦点时移除轮廓样式。它还增加了奇怪的边框等。

这种行为背后的原因是什么，我认为它破坏了可访问性？如何在修改简单的 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" />

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

实际结果：输入焦点时没有出现轮廓。

标签： cssfirefoxfocusaccessibilityoutline

Answer 1

如果要更改的元素 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;
       
  }
}