https://i.sstatic.net/a5BKg.png
I have noticed that when I click on the input field, a blue border appears around it. Is there a way to remove or change this border?
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button type="button" class="btn btn-outline-primary mb- 2">Subscribe</button>
</div>
</div>
My attempt to remove the blue border by targeting the input field using CSS didn't work as expected. Instead of removing the border, it affected the styling inside of the input.
.input:focus {
outline: none !important;
}