Topic: Remove Bootstrap 4 blue border from custom file input on focus
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;
}
Add comment
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: all
- Browser: all
- OS: all
- Provided sample code: No
- Provided link: No