Remove the selection effect of TextField

Question

When we click on TextField of Fluent UI, the border is highlighted. I would like to remove this effect.

I tried the following, but none of them works:

textarea:focus,
input:focus {
  outline: none;
}

*:focus {
  outline: none;
}

input:focus {
  outline: none;
}

input {
  border: none;
}

:focus-visible {
  outline: none;
}

Here is the codesandbox: https://codesandbox.io/s/determined-brook-0cd0rc?file=/src/App.js

Could anyone help?

Answer 1

The highlight style is getting applied from the parent div of the input, so, we have to apply style to it, not the input. Try these styles:

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