在ReactJS中更改引导文件输入焦点发光颜色

Question

我有此文件输入，我想在选择它时更改蓝色发光的颜色。

input:focus, input[custom-file-input]:focus, .uneditable-input:focus {
    border-color: $custom-orange;
    box-shadow: 0 1px 1px rgba(229, 103, 23, 0.075) inset, 0 0 8px $custom-orange;
    outline: 0 none;
}

我尝试将CS​​S更改为此：

<Form className='file-form col-12'>
    <input type='file' className='custom-file-input' id='batch-file'
           onChange={e => this.setState({file: e.target.files[0], fileName: e.target.files[0].name})}/>
    <label className='custom-file-label' htmlFor='customFile'>{this.state.fileName}</label>
</Form>

正如我在许多示例中看​​到的那样。我宁愿在我制作的样式表中进行操作，也不要进入实际的引导文档。

我想要的一个很好的例子直接来自Bootstrap网站。他们如何使搜索框突出显示为紫色？

编辑：

似乎有一些更改使我更接近想要的结果。

JSX：

.file-form:focus, .file-form:active, .file-form:hover{
    border-color: $custom-orange;
    box-shadow: 0 1px 1px rgba(229, 103, 23, 0.6) inset, 0 0 8px $custom-orange;
    //outline: 0 none;
 }

SCSS：

DENSE_RANK()

几乎可以使用。单击它后，仍有蓝色的发光。

Answer 1

.form-control:focus {
  box-shadow: none;
}

添加这个