Input Text with Validation Message

Enhance your form validation process with input text fields featuring validation messages. Learn how to provide users with informative feedback on their input for a smoother user experience.

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>
  <div class="validation">* First name is required</div>
</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 #9f9f9f;
  padding: 0 20px 0 56px;
  font-size: 17px;
  font-family: inherit;
  color: #f9f9f9;
  outline: none;
}

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

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

.textbox .icon {
  position: absolute;
  top: 50%;
  left: 20px;
  margin-top: -12px;
  pointer-events: none;
}

.validation {
  position: absolute;
  top: 74px;
  left: 0;
  width: 100%;
  padding: 20px;
  border-radius: 6px;
  background: #dd4949;
  transform-origin: 50% 0%;
  transition: 0.4s;
}

.textbox input:valid ~ .validation {
  transform: scaleY(0);
}

```
No need of JavaScript
```

Enhance your website's form elements with a stylish input text field featuring a validation message. 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 and provide clear validation feedback.

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 a validation message. 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 a validation message 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 a validation message 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

`<div class="textbox">`

<div class="textbox">: This div acts as a container for the input field, icon, and validation message.

`<input>`

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

required: This attribute specifies that the input field must be filled out before submitting the form.
spellcheck="false": Disables spellchecking for this input field.
type="text": Specifies that the input is a text field.
placeholder="First name": This placeholder text appears inside the input field when it's empty.

`<span class="icon material-symbols-outlined">`

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

<span>: This span contains an icon.
class="icon material-symbols-outlined": These classes apply styles to the icon. The material-symbols-outlined class suggests that it's using Material Icons, a popular icon set.
account_circle: This is the name of the icon from the Material Icons set, which visually represents an account or user.

`<div class="validation">`

<div class="validation">* First name is required</div>:

<div>: This div contains the validation message.
class="validation": This class applies specific styles to the validation message.
* First name is required: The text of the validation message, indicating that the first name is a required field.

CSS Code

Universal Selector

* {
  box-sizing: border-box;
}

box-sizing: border-box: This ensures that padding and border are included in the element's total width and height.

HTML and Body Styling

html,
body {
  height: 100%;
}

height: 100%: Sets the height of html and body to 100% of the viewport height.

Body Styling

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

margin: 0: Removes default margin from the body.
display: grid: Sets the body to use CSS Grid layout.
place-items: center: Centers content horizontally and vertically.
background: #1a1a1a: Sets the background color to a dark gray.
color: #f9f9f9: Sets the text color to a light gray.
font-family: Specifies the fonts "Euclid Circular A" and "Poppins".

Textbox Container Styling

.textbox {
  position: relative;
}

position: relative: Positions the textbox relative to its normal position, allowing absolute positioning for child elements.

Input Field Styling

.textbox input {
  width: 260px;
  height: 64px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid #9f9f9f;
  padding: 0 20px 0 56px;
  font-size: 17px;
  font-family: inherit;
  color: #f9f9f9;
  outline: none;
}

width: 260px: Sets the width of the input field.
height: 64px: Sets the height of the input field.
border-radius: 6px: Rounds the corners of the input field.
background: transparent: Makes the input field background transparent.
border: 1px solid #9f9f9f: Adds a border with a light gray color.
padding: 0 20px 0 56px: Adds padding inside the input field, making room for the icon.
font-size: 17px: Sets the font size.
font-family: inherit: Inherits the font family from the parent element.
color: #f9f9f9: Sets the text color to light gray.
outline: none: Removes the default outline.

Placeholder Text Styling

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

color: rgb(255 255 255 / 50%): Sets the placeholder text color to a light gray with 50% opacity.

Valid Input Field Styling

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

border-color: #26dfae: Changes the border color to green when the input is valid.

Icon Styling

.textbox .icon {
  position: absolute;
  top: 50%;
  left: 20px;
  margin-top: -12px;
  pointer-events: none;
}

position: absolute: Positions the icon absolutely within the textbox.
top: 50%: Centers the icon vertically.
left: 20px: Positions the icon 20px from the left.
margin-top: -12px: Adjusts the vertical position to center the icon.
pointer-events: none: Makes the icon non-interactive.

Validation Message Styling

.validation {
  position: absolute;
  top: 74px;
  left: 0;
  width: 100%;
  padding: 20px;
  border-radius: 6px;
  background: #dd4949;
  transform-origin: 50% 0%;
  transition: 0.4s;
}

position: absolute: Positions the validation message absolutely within the textbox.
top: 74px: Positions the validation message 74px from the top.
left: 0: Aligns the validation message with the left edge of the textbox.
width: 100%: Sets the width to 100% of the textbox.
padding: 20px: Adds padding inside the validation message.
border-radius: 6px: Rounds the corners.
background: #dd4949: Sets the background color to red.
transform-origin: 50% 0%: Sets the origin point for transformations to the top center.
transition: 0.4s: Applies a transition effect for 0.4 seconds.

Validation Message Visibility

.textbox input:valid ~ .validation {
  transform: scaleY(0);
}

transform: scaleY(0): Scales the validation message vertically to 0, effectively hiding it when the input is valid.