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 JuiceOP2y 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 Man2y ago
label::after { display: none; }?
Fanta Juice
Fanta JuiceOP2y ago
I just put that in the css? ooo it worked thanks
Fanta Juice
Fanta JuiceOP2y ago
is there any way to remove the big containe aswell? This one seems to be attached though
Fanta Juice
Fanta JuiceOP2y ago
yes there is, border: none
Want results from more Discord servers?
Add your server