Use the bottom border animation to achieve a simple and modern input box, and the border changes color when focused; 2. Use rounded corners and shadows to enhance visual hierarchy, suitable for forms that need to be highlighted; 3. Simulate the floating label effect of Material Design, and control the status with required attributes or JavaScript; 4. Design for dark themes, use deep backgrounds and bright borders to improve readability; 5. Embed search icons in the input box to achieve the combination of graphics and text through absolute positioning; 6. Provide form verification feedback by adding errors and success style classes, which can be dynamically switched in combination with JavaScript; always ensure contrast, accessibility, focus status and mobile compatibility to improve user experience.

Styling input fields with CSS can greatly improve the look and usability of your forms. Here are several practical and modern CSS input field style examples you can use or customize for your projects.

1. Clean & Minimal Input with Border Animation

A subtle, modern look with a bottom border that animates on focus.

 .input-minimal {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #333;
  border: none;
  border-bottom: 2px solid #ccc;
  outline: none;
  background: transparent;
  transition: border-color 0.3s;
}

.input-minimal:focus {
  border-bottom-color: #007bff;
}

Use this for login forms or search bars where a lightweight design is preferred.

2. Rounded Input with Box Shadow

A more prominent input with soft shadows and rounded corners.

 .input-rounded {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  color: #495057;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 25px;
  outline: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.input-rounded:focus {
  border-color: #007bff;
  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.25);
}

Great for signup forms or contact pages where visibility matters.

3. Material Design Style Input

Floating label effect inspired by Google's Material Design.

 <div class="material-input">
  <input type="text" id="name" required>
  <label for="name">Your Name</label>
</div>

 .material-input {
  position: relative;
  margin-bottom: 20px;
}

.material-input input {
  width: 100%;
  padding: 12px 0;
  font-size: 16px;
  border: none;
  border-bottom: 1px solid #999;
  outline: none;
  background: transparent;
}

.material-input label {
  position: absolute;
  left: 0;
  top: 12px;
  font-size: 16px;
  color: #777;
  pointer-events: none;
  transition: 0.3s ease all;
}

.material-input input:focus ~ label,
.material-input input:valid ~ label {
  top: -10px;
  font-size: 12px;
  color: #007bff;
}

Requires required attribute or JavaScript to handle the "valid" state for proper floating.

4. Dark Mode Input

Styling for dark-themed websites.

 .input-dark {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  color: #e0e0e0;
  background-color: #2a2a2a;
  border: 1px solid #444;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.3s;
}

.input-dark:focus {
  border-color: #00aaff;
  box-shadow: 0 0 8px rgba(0, 170, 255, 0.3);
}

Pair with a dark background ( #1a1a1a ) for best contrast.

5. Search Input with Icon

Combine an icon (eg, a search glass) inside the input.

 <div class="search-input">
  <input type="text" placeholder="Search...">
  <span class="icon">?</span>
</div>

 .search-input {
  position: relative;
  width: 100%;
}

.search-input input {
  width: 100%;
  padding: 12px 40px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 30px;
  outline: none;
}

.search-input .icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
}

You can replace ? with an SVG or icon font like Font Awesome.

6. Error & Success States

Visual feedback for validation.

 .input-error {
  border-color: #dc3545;
  background-color: #f8d7da;
}

.input-success {
  border-color: #28a745;
  background-color: #d4edda;
}

/* Add small icons via ::before or ::after if needed */

Use JavaScript to toggle these classes based on input validation.

Tips for Better Input Styleing:

• Always ensure good contrast for accessibility.
• Use :focus states to improve keyboard navigation.
• Avoid removing outlines completely — instead, restyle them.
• Test on mobile — some styles behave differently on iOS/Android.

Basically, the key is consistency and usability. These examples give you a solid foundation — tweak colors, padding, and transitions to match your site's design system.

The above is the detailed content of css input field style examples. For more information, please follow other related articles on the PHP Chinese website!