如何修改SCSS样式使Bulma框架下的只读输入框聚焦时无边框

Problem Description #

I've created a SCSS class section-readonly-input for an input field (marked as readonly) in a React app using Bulma. The goal is to have the input completely borderless in all states (default, hover, focus), but right now when the input gets focused, a border/highlight still appears. Here's my current code:

React Component

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 Code

.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 #

Ah, I know this quirk with Bulma! The issue is that Bulma doesn't rely solely on border for the focused input state—it uses a box-shadow to create that subtle highlight glow you're seeing. Your current CSS targets border and outline, but misses this box-shadow property.

Here's the updated SCSS code to fix it:

.section-readonly-input {
  // Reset base styles to remove borders/outlines
  border: none !important;
  border-width: 0 !important;
  outline: none !important;
  box-shadow: none !important;

  // Ensure hover state stays borderless
  &:hover {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  // Critical fix for focus state
  &:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    // Optional: Since it's readonly, prevent focus entirely for better UX
    pointer-events: none;
  }
}

Explanation #

• box-shadow: none !important: This overrides Bulma's default focus glow, which was the hidden culprit behind the "border" effect you noticed.
• pointer-events: none (optional): Since your input is marked as readonly, adding this will stop users from focusing it at all, making the behavior feel more intuitive for a non-editable field.
• !important: Bulma's built-in styles have high specificity, so !important ensures your custom rules take priority. If you prefer to avoid !important, you could make your selector more specific (e.g., .control .section-readonly-input), but it's a safe choice here for a simple readonly input.

内容的提问来源于stack exchange，提问作者Mr. Hankey