https://i.sstatic.net/Gnm6u.png
I'm currently attempting to create a separation between the "Choose File" button and the "No file chosen" area, similar to what is shown in the image above.
Below is the HTML code I am using:
<p class="mb-0 f-w-600">{{'BUSINESS_EDIT_LOGO' | translate}}</p>
<div class="file-input-container form-group mb-3">
<input
class="form-control"
type="file"
formControlName="logo"
(change)="fileChangeEvent($event)"
>
</div>
And here is the associated CSS:
.form-control[type="file"]{
gap: 15px;
}
.form-control[type="file"]::file-selector-button {
border-radius: 4px;
padding: 6px 12px 6px 12px;
margin-right: 10px;
}
I have attempted adding a margin to the button and setting a gap, but neither of these adjustments have had any visible effect. Any guidance on how to achieve the desired spacing would be greatly appreciated.