Show no border on focus of an input field-CodePudding

I have created a SCSS class section-readonly-input. This should not show borders. I now have the following problem, when I click on the input field a border is still shown. But this should not be. No border should be displayed.

My question is, how do I rewrite my SCSS so that no border is displayed when I click on it? I'm using the framework 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;
  }
}

CodePudding user response：

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

Try this.

CodePudding user response：

The default browser agent stylesheet has the following for the input element when clicking on it.

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

We have to override this by setting

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

This will fix your problem

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

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

<input class="section-readonly-input" type="text" value="This text is readonly" readonly />

CodePudding user response：

Are you sure you should remove it? It is there for a reason. https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html