To disable the input glow effect caused by the :focus pseudo-class, you can set the box-shadow property to none.
<div class="form-floating">
<textarea class="form-control" placeholder="Input without glow effect" id="demoTextAreaWithoutGlowEffect" maxlength="60"></textarea>
<label for="demoTextAreaWithoutGlowEffect">Input without glow effect on focus</label>
</div>
#demoTextAreaWithoutGlowEffect {
border: none;
overflow: auto;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#demoTextAreaWithoutGlowEffect:focus {
outline: none;
background-color: rgba(255, 255, 255, 0.9);
color: rgba(0, 0, 255, 0.9);
}
outline: none;: This removes the default outline that appears on input elements when they are focused.box-shadow: none;: This removes any additional glow effect that may be applied through a box-shadow when the input is focused.If you want to customize the focus state rather than removing it entirely, you can add your own style, like changing the border color or applying a subtle shadow instead of the default glow:
#demoTextAreaWithoutGlowEffect {
border: none;
overflow: auto;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#demoTextAreaWithoutGlowEffect:focus {
outline: none;
border: 2px solid #006CFF;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}