Input Text with Icon and Validation Indicator

Enhance your form design with input text fields featuring icons and validation indicators. Learn how to add visual cues to your input fields for improved user experience and data validation.

Preview
Code

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />

<div class="textbox">
  <input required spellcheck="false" type="text" placeholder="First name" />
  <span class="icon material-symbols-outlined"> account_circle </span>
  <span class="asterix">*</span>
</div>

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  background: #1a1a1a;
  color: #f9f9f9;
  font-family: "Euclid Circular A", "Poppins";
}

.textbox {
  position: relative;
}

.textbox input {
  width: 260px;
  height: 64px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid #df2666;
  padding: 0 20px 0 56px;
  font-size: 17px;
  font-family: inherit;
  color: rgb(255 255 255 / 96%);
  outline: none;
}

.textbox input:focus ~ .icon {
  opacity: 1;
}

.textbox input::placeholder {
  color: rgb(255 255 255 / 50%);
}

.textbox input:valid {
  border-color: #26dfae;
}

.textbox input:valid,
.textbox input:valid ~ :is(.asterix, .icon) {
  animation: none;
}

.textbox :is(input:valid) ~ .asterix {
  opacity: 0;
}

@keyframes shake {
  0%,
  100% {
    translate: 0;
  }
  25% {
    translate: 8px 0;
  }
  75% {
    translate: -8px 0;
  }
}

.textbox .asterix {
  position: absolute;
  top: 21px;
  right: 20px;
  font-size: 22px;
  pointer-events: none;
  color: #df2666;
}

.textbox .icon {
  position: absolute;
  top: 50%;
  left: 20px;
  margin-top: -12px;
  opacity: 0.5;
}

.textbox input,
.textbox .icon,
.textbox .asterix {
  animation: shake 0.1635s 0s 3;
}

```
No need of JavaScript
```

Enhance your website's form elements with a stylish input text field featuring an icon and a validation indicator. This guide will walk you through creating a customizable input text field using HTML and CSS. Follow these instructions to copy the provided code snippet, link the required CSS files, and personalize the input field to match your website's design.

Step 1: Copy the Code Snippet

Start by copying the provided HTML and CSS code snippet below. This snippet includes the foundational structure and styles for the input text field with an icon and validation indicator. Select the code, copy it, and paste it into your respective HTML and CSS files.

Step 2: Link CSS Files

Ensure the CSS file and Google Material Symbols font are correctly linked in your HTML document. Add the following <link> tags within the <head> section to import the CSS styles:
```
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet">
```

Step 3: Customize and Make it Yours

Personalize the input text field with an icon and validation indicator to match your website's branding and functionality. Adjust the CSS styles to modify the input field's appearance, colors, and interactions. Experiment with different icons, colors, and sizes to create a unique and engaging form element.

By following these steps, you can implement and customize an input text field with an icon and validation indicator on your website using HTML and CSS. Tailor the input field to your specific needs and enhance your site's forms with this modern and stylish component.

Code Explanation

HTML Code

Container div

<div class="textbox">

div: Acts as a container for the input field and additional elements.
class="textbox": Applies CSS styles specific to the textbox class.

Input Field

<input required spellcheck="false" type="text" placeholder="First name" />

<input>: Standard HTML input element for text entry.
required: Specifies that the input field must be filled out before form submission.
spellcheck="false": Disables spellchecking for this input field.
type="text": Sets the input type to text.
placeholder="First name": Provides a hint to the user of what to enter in the input field.

Icon

<span class="icon material-symbols-outlined"> account_circle </span>

<span>: Inline container for the icon.
class="icon material-symbols-outlined": Uses classes to style the span and apply a material icon.
account_circle: Text within the span, which is interpreted as an icon by the material-symbols-outlined class.

Asterisk

<span class="asterix">*</span>

<span>: Inline container for the asterisk.
class="asterix": Applies specific styles to the asterisk.
*: Text within the span, representing an asterisk, often used to indicate required fields.

CSS Code

Universal and Body Styles

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  display: grid;
  place-items: center;
  background: #1a1a1a;
  color: #f9f9f9;
  font-family: "Euclid Circular A", "Poppins";
}

Universal selector (*): Sets box-sizing to border-box for all elements, ensuring padding and border are included in the element's total width and height.
html, body: Sets the height to 100% to ensure the body takes up the full viewport height.
body:
- Removes default margin.
- Uses CSS Grid to center content vertically and horizontally.
- Sets a dark background color (#1a1a1a).
- Sets text color to light (#f9f9f9).
- Applies font families "Euclid Circular A" and "Poppins".

Textbox Styles

.textbox {
  position: relative;
}

.textbox: Positions its children relative to its own position.

Input Styles

.textbox input {
  width: 260px;
  height: 64px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid #df2666;
  padding: 0 20px 0 56px;
  font-size: 17px;
  font-family: inherit;
  color: rgb(255 255 255 / 96%);
  outline: none;
}

.textbox input:

Sets width and height.
Rounds corners with border-radius.
Makes the background transparent.
Sets a red border (#df2666).
Adds padding, with extra space on the left for the icon.
Sets font size and inherits font family from the body.
Sets text color to nearly opaque white.
Removes the default outline.

Focus Styles

.textbox input:focus ~ .icon {
  opacity: 1;
}

.textbox input:focus ~ .icon: When the input is focused, it makes the icon fully visible by setting its opacity to 1.

Placeholder Styles

.textbox input::placeholder {
  color: rgb(255 255 255 / 50%);
}

.textbox input::placeholder: Styles the placeholder text to be 50% opaque white.

Valid Input Styles

.textbox input:valid {
  border-color: #26dfae;
}

.textbox input:valid: Changes the border color to green (#26dfae) when the input is valid.

Valid Input Animation Removal

.textbox input:valid,
.textbox input:valid ~ :is(.asterix, .icon) {
  animation: none;
}

.textbox input:valid: Removes any animation applied to the input, asterisk, and icon when the input is valid.

Asterisk Visibility

.textbox :is(input:valid) ~ .asterix {
  opacity: 0;
}

.textbox :is(input:valid) ~ .asterix: Hides the asterisk when the input is valid.

Shake Animation Keyframes

@keyframes shake {
  0%,
  100% {
    translate: 0;
  }
  25% {
    translate: 8px 0;
  }
  75% {
    translate: -8px 0;
  }
}

@keyframes shake: Defines a shake animation that moves elements horizontally.

Asterisk Styles

.textbox .asterix {
  position: absolute;
  top: 21px;
  right: 20px;
  font-size: 22px;
  pointer-events: none;
  color: #df2666;
}

.textbox .asterix:

Positions the asterisk absolutely within the .textbox.
Sets its position, size, and color.
Disables pointer events to prevent interaction.

Icon Styles

.textbox .icon {
  position: absolute;
  top: 50%;
  left: 20px;
  margin-top: -12px;
  opacity: 0.5;
}

.textbox .icon:

Positions the icon absolutely within the .textbox.
Centers it vertically.
Sets its opacity to 50%.

Shake Animation Application

.textbox input,
.textbox .icon,
.textbox .asterix {
  animation: shake 0.1635s 0s 3;
}

.textbox input, .textbox .icon, .textbox .asterix:

Applies the shake animation to the input, icon, and asterisk.
The animation lasts 0.1635 seconds and repeats 3 times.