3+ Input Components - Vanilla CSS

Input components are user interface elements used on websites to collect information from users, such as text, numbers, or selections. These components typically include text fields, checkboxes, radio buttons, and dropdown menus. In this collection, you'll find various designs for input components that you can easily incorporate into your website's design. Whether you need basic input fields or more advanced input options, these components are designed to streamline the user input process and provide a seamless browsing experience for your website visitors.

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.

Author: Joe

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

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.

Author: Joe

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

Input Textbox with Floating Label

Elevate your form design with stylish input textboxes featuring floating labels. Learn how to create a modern and user-friendly form input layout using HTML and CSS for improved usability.

Author: Joe

Preview
Code

<div class="textbox">
  <input
    required
   id="textbox"
    spellcheck="false"
    type="text"
    placeholder="Type a name"
  />
  <label for="textbox">Username</label>
</div>

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  background: #1a1a1a;
  color: #f9f9f9;
}

.textbox {
  position: relative;
}

.textbox label {
  position: absolute;
  display: grid;
  place-items: center;
  transform-origin: 0% 0%;
  pointer-events: none;
  top: 4px;
  left: 4px;
  height: 52px;
  width: 110px;
  border-radius: 27px;
  background: #5071fa;
  transition: 0.3s;
}

.textbox input {
  width: 300px;
  height: 60px;
  border-radius: 30px;
  background: #313136;
  border: 0;
  padding-left: 126px;
  font-size: 16px;
  font-family: inherit;
  color: rgb(255 255 255 / 96%);
  outline: none;
  transition: 0.3s;
}

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

.textbox :is(input:focus, input:valid) {
  padding-left: 20px;
}

.textbox :is(input:focus, input:valid) ~ label {
  translate: 0 -54px;
  scale: 0.825;
}

```
No need of JavaScript
```

Simple Input

Revamp your web forms with our stylish input field UI component, designed for HTML and CSS. Elevate user experience with responsive and customizable text, email, and password input fields.

Author: Admin

Preview
Code

<div class="input-container">
  <input type="text" class="input-field" placeholder="Enter your text...">
  <input type="email" class="input-field" placeholder="Enter your email...">
  <input type="password" class="input-field" placeholder="Enter your password...">
</div>

.input-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f2f2f2;
  border-radius: 5px;
}

.input-field {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box;
}

.input-field:focus {
  border-color: #007bff;
  outline: none;
}

@media only screen and (max-width: 600px) {
  .input-container {
    width: 90%;
  }
}

```
No need of JavaScript
```