Is it impossible change choose file text of input file in Bootstrap 5 using CSS like Bootstrap 4?
And how can I add a margin to "No file chosen"?
Choose file
button with the ::file-selector-button
pseudo-element. There are pseudo-elements ::-webkit-file-upload-button
and ::-ms-browse
for older versions of Chrome/Opera/Safari and Edge/IE respectively. But bootstrap.css uses ::file-selector-button
and ::-webkit-file-upload-button
only. So I propose to do the same.:hover
effect and for the thin border between the label and the input field.Tested in Chrome, Firefox and Edge.
https://codepen.io/glebkema/pen/VwMQWGE
.custom-file-button input[type=file] {
margin-left: -2px !important;
}
.custom-file-button input[type=file]::-webkit-file-upload-button {
display: none;
}
.custom-file-button input[type=file]::file-selector-button {
display: none;
}
.custom-file-button:hover label {
background-color: #dde0e3;
cursor: pointer;
}
<div class="container py-3">
<div class="input-group custom-file-button">
<label class="input-group-text" for="inputGroupFile">Your Custom Text</label>
<input type="file" class="form-control" id="inputGroupFile">
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css">