Change border color of input field-CodePudding

I use a CSS framework (Bulma). However, I would like to design my input field a little differently. For example, it should have a red border. I use scss. However, it does not work. When I import my class, the border is not displayed in red.

How can I adapt my input field in addition to the CSS framework, e.g. so that I have a red border?

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="input section-changing-input" type="text" value="Hello" />
                                <span className="icon is-small is-left">
                                    <i className="fas fa-futbol"></i>
                                </span>
                            </p>
                        </div>


            </div>
        </div>
    )
}

export default General

General.scss

section-changing-input {
    input {
        border-color: crimson !important;
    }
}

CodePudding user response：

Make sure you have imported the Bulma CSS library before your custom CSS. Otherwise, the custom CSS changes you make will not be applied.

CodePudding user response：

Bulma's input borders are set with the $input-border-color variable. If you're compiling Bulma in with your own scss files, then simply declare that as red before importing Bulma.