Back

Crafting a Reactive Glowing Input Field

An in-depth guide to constructing an input field that dynamically reacts with a glowing border effect upon interaction.

HTML

To construct our glowing input field, we start with a simple HTML structure. We need a container that holds our input element, giving it the space and center alignment necessary for the visual effects.

      <div class="glow-container">
        <input type="text" class="glow-input" placeholder="Type here..."></input>
      </div>

CSS

Our CSS applies the primary visual effects, including the glowing border that reacts to user input. First, style the container and input element. The container should be a flexbox that centers its child both vertically and horizontally.

      .glow-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f8ff;
      }

Next, we define styles for the input itself. The "glow-input" class helps us target the element for styling its padding, border, and radius. The crucial part of this styling is the transition properties, offering smooth animation when the input is focused.

      .glow-input {
        padding: 10px;
        border: 2px solid #ccc;
        border-radius: 25px;
        outline: none;
        transition: border-color 0.3s, box-shadow 0.3s;
      }

The magic happens when we add a :focus pseudo-class to our input field. This selector allows us to style the input specifically when it receives focus (such as when a user clicks in it to start typing). Here, we enhance the border color and add a box-shadow effect, yielding a "glow" that surrounds the input field.

      .glow-input:focus {
        border-color: #32ffcc;
        box-shadow: 0 0 10px #32ffcc;
      }

This straightforward implementation leverages CSS transitions to deliver smooth visual feedback without requiring any JavaScript. Our stylish input glows softly in response to user interaction, providing a modern, aesthetically pleasing user interface element. And that's how you create a responsive glowing input field purely using HTML and CSS!

Whole code

<div class="glow-container">
  <input type="text" class="glow-input" placeholder="Type here..."></input>
</div>


<style>
.glow-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f8ff;
}
.glow-input {
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 25px;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.glow-input:focus {
  border-color: #32ffcc;
  box-shadow: 0 0 10px #32ffcc;
}

</style>

Thank you for reading this article.

Crafting a Reactive Glowing Input Field

HTML

CSS

Whole code

Comments

More inputs

Similar

See also