I am looking to redesign the Bootstrap Form Upload field. The main reason behind this is that in Bootstrap, the file upload field is treated as one single component, making it impossible to separate the file upload button from the file upload text.
The first image shows the Bootstrap's default upload field, while the second image displays my custom upload button.
The HTML Code for the 2 Buttons
<div class="mb-3 right-box">
<label for="formFile">Binary Package</label>
<input class="form-control formname" (change)="onFileSelected($event); " type="file" id="formFile">
</div>
<label for="formFile">Source Package</label><br>
<button id="formFile" (click)="binaryPackageInput.click()">
Browse...
</button>
<input #binaryPackageInput class="form-control formname binary-package"
(change)="onFileSelected($event); checkForm()" type="file" formControlName="fileControl">
<span>{{this.fileName}}</span>
The CSS Code is as follows:
input.binary-package {
display: none;
}
Is there a way to style the second upload button separately from the text but keep the same appearance as the first upload button using the same bootstrap classes?
I was hoping they would end up looking identical.