输入字段焦点上不显示边框

Question

我创建了一个 SCSS 类section-readonly-input。这不应该显示边框。我现在遇到以下问题，当我单击输入字段时，仍然显示边框。但这不应该。不应显示边框。

我的问题是，如何重写我的 SCSS，以便单击它时不显示边框？我正在使用框架 Bulma。

import React from "react";
import "./style/General.scss";

function General() {
  return (
    <div>
      <div className="field">
        <p className="control has-icons-left has-icons-right">
          <input
            className="section-readonly-input"
            type="text"
            value="This text is readonly"
            readonly
          />
          <span className="icon is-small is-left">
            <i className="fas fa-futbol"></i>
          </span>
        </p>
      </div>
    </div>
  );
}

export default General;

通用.scss

.section-readonly-input {
  outline: none !important;
  border-width: 0px !important;
  border: none !important;
  &:hover {
    outline: none !important;
    border-width: 0px !important;
    border: none !important;
  }
  &:focus {
    outline: none !important;
    border-width: 0px !important;
    border: none !important;
  }
}

Answer 1

单击输入元素时，默认浏览器代理样式表具有以下内容。

:focus-visible {
    outline: -webkit-focus-ring-color auto 1px;
}

我们必须通过设置来覆盖它

:focus-visible {
    outline: -webkit-focus-ring-color auto 1px;
}

这将解决你的问题

.section-readonly-input {
  border: none;
  &:focus-visible{
    outline: none;
  }
}

.section-readonly-input {
  border: none;
}

.section-readonly-input:focus-visible{
    outline: none;
  }