Show no border on focus of an input field

Issue

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

Solution

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.

Answered By – kyun

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0