HTML and CSS

Remove the glow effect on focus

To disable the input glow effect caused by the :focus pseudo-class, you can set the box-shadow property to none.

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

Explanation:

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

Arrow at the bottom Arrow at the bottom with a utf-8 character Arrow at the top of a container Aside Background color Blackboard design Breadcrumbs design Calendar design Checkboxes design Checkboxes as switch buttons design Circular image with border and shadow design Cursor Font Awesome pulled icons Gallery picture frame with a price ribbon Google pie chart Google web fonts Image caption Last child and not last child element Letter spacing List items with a Font Awesome icon Neon text Neon text with a flickering effect Notebook paper background Radio buttons design Radio buttons as stars Remove the glow effect from an input field Search bar with categories Track (audio/video subtitles) Web fonts Whiteboard design