在输入字段的焦点上不显示边框答案

【问题标题】：Show no border on focus of an input field在输入字段的焦点上不显示边框
【发布时间】：2021-09-29 07:15:50
【问题描述】：

我创建了一个 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;

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;
  }
}

【问题讨论】：

你能展示一个工作原型/沙箱吗？你在用bootstrap之类的框架吗？
请看我的编辑。谢谢。
工作正常here，您必须使用任何 CSS 库。
另外，当您使用 React 时，您应该将属性命名为 readOnly，并且由于没有输入更改处理程序，因此请使用 defaultValue 而不是 value。

标签： css reactjs sass

【解决方案1】：

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

: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;
  }

&lt;input class="section-readonly-input" type="text" value="This text is readonly" readonly /&gt;

【讨论】：

【解决方案2】：

input[type=text].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;
  }
}

试试这个。

【讨论】：

【解决方案3】：

您确定要删除它吗？它的存在是有原因的。 https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html

【讨论】：