How do I remove/hide the Browse button?(it's linked to ::after)

Here's my code:
<!-- Card Body -->
<style>
.bigger-icon {
font-size: 1rem; /* Adjust this value to make the icon bigger or smaller */
cursor: pointer; /* Add cursor pointer to indicate it's clickable */
}
.custom-file-input {
display: none;
}
/* Style the custom file label to look like a Bootstrap button */
.custom-file-label {
display: inline-block;
}
/* Apply some spacing between the icon and text inside the label */
.custom-file-label span {
margin-right: 8px;
}
</style>

<div class="card-body">
<div class="chart-area">
<canvas id="myAreaChart"></canvas>
<form action="/action_page.php">
<label for="img" class="custom-file-label bigger-icon">
<i class="bi bi-plus-square"></i> Uploadddd
</label>
<input type="file" id="img" name="img" class="custom-file-input" accept="image/*">
<input type="submit" class="d-none">
</form>
</div>
</div>
<!-- Card Body -->
<style>
.bigger-icon {
font-size: 1rem; /* Adjust this value to make the icon bigger or smaller */
cursor: pointer; /* Add cursor pointer to indicate it's clickable */
}
.custom-file-input {
display: none;
}
/* Style the custom file label to look like a Bootstrap button */
.custom-file-label {
display: inline-block;
}
/* Apply some spacing between the icon and text inside the label */
.custom-file-label span {
margin-right: 8px;
}
</style>

<div class="card-body">
<div class="chart-area">
<canvas id="myAreaChart"></canvas>
<form action="/action_page.php">
<label for="img" class="custom-file-label bigger-icon">
<i class="bi bi-plus-square"></i> Uploadddd
</label>
<input type="file" id="img" name="img" class="custom-file-input" accept="image/*">
<input type="submit" class="d-none">
</form>
</div>
</div>
I haven't done html in a while :P so Im not sure what ::before and ::after does.
5 Replies
Fanta Juice
Fanta Juice11mo ago
Btw, it's for uploading an image In fact, if yk a better way to upload image and replacing the default button with a bootsstrap icon then lemme know thanks!
Mango Man
Mango Man11mo ago
label::after { display: none; }?
Fanta Juice
Fanta Juice11mo ago
I just put that in the css? ooo it worked thanks
Fanta Juice
Fanta Juice11mo ago
is there any way to remove the big containe aswell? This one seems to be attached though
Fanta Juice
Fanta Juice11mo ago
yes there is, border: none