删除TextField的选择效果

Question

当我们点击Fluent UI的TextField时，边框会突出显示。我想删除这个效果。

我尝试了以下方法，但都不成功:

textarea:focus,
input:focus {
outline: none;
}
*:focus {
outline: none;
}
input:focus {
outline: none;
}
input {
border: none;
}
:focus-visible {
outline: none;
}

下面是codesandbox: https://codesandbox.io/s/determined-brook-0cd0rc?file=/src/App.js

有人能帮忙吗?

Answer 1

高亮样式是从输入的父div中应用的，所以，我们必须对它应用样式，而不是输入。试试这些样式:

.ms-TextField-fieldGroup {
border-color: #000;
}
.ms-TextField-fieldGroup::after {
display: none;
}