Remove Bootstrap 4 blue border from custom file input on foc


Topic: Remove Bootstrap 4 blue border from custom file input on focus

mcfc4heatons asked 4 years ago

Expected behavior No blue border on custom file input focus Actual behavior has blue border on focus Resources (screenshots, code snippets etc.) HTML:

                        <div class="custom-file">
                        <input type="file" placeholder="Upload file" class="custom-file-input" />
                        <label class="custom-file-label" for="customFile">Choose file</label>
                    </div>

CSS:

input.custom-file-input:focus, input.custom-file-input:active {
outline: none;
border: none;

}


Tomek Makowski staff answered 4 years ago

Hi

To delete this 'outline', actually it is shadow with border in label, try to use this css code:

.custom-file-input:focus~.custom-file-label {
  border-color: none;
  box-shadow: none;
}

Regards


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: all
  • Browser: all
  • OS: all
  • Provided sample code: No
  • Provided link: No