How does this CSS snippet work?

outline: none;: It removes the default outline that appears on input elements when they are focused.
box-shadow: none;: It removes any additional glow effect that may be applied through a box-shadow when the input is focused.

Suggestion:

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:

HTML

<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>

CSS

#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);	
}

HTML and CSS

Remove the glow effect on focus

How does this CSS snippet work?

Suggestion:

About the author