l-1

WEB教程

主页/CSS教程/CSS功能模块/CSS输入框样式

CSS教程

CSS输入框样式

CSS输入框样式美化：文本框与密码框设计

本文将详细介绍如何使用CSS美化网页中的输入框，包括文本框和密码框。通过本教程，您将学会如何创建既美观又用户友好的表单输入元素。

1. 输入框基础知识

输入框是网页表单中最常用的元素之一，用于收集用户输入的数据。在HTML中，输入框主要通过<input>标签创建，通过设置不同的type属性来定义输入框类型，如文本输入框(type="text")和密码输入框(type="password")。

基本输入框HTML结构：

<div class="input-container">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" placeholder="请输入用户名">
</div>

输入框的常见类型：

  • 文本输入框(text)：用于普通文本输入
  • 密码输入框(password)：用于密码输入，内容会以星号或圆点显示
  • 电子邮件输入框(email)：用于输入电子邮件地址，具有基本的格式验证
  • 数字输入框(number)：仅允许输入数字

2. 输入框基本样式设计

2.1 尺寸与边框

控制输入框的尺寸和边框是样式设计的基础：

input[type="text"], input[type="password"] {
  width: 300px;
  height: 40px;
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

2.2 背景与文字

设置输入框的背景和文字样式可以提升视觉效果：

input[type="text"], input[type="password"] {
  color: #333;
  background-color: #fff;
  font-family: 'Arial', sans-serif;
}

2.3 占位符样式

使用::placeholder伪元素可以自定义占位符文字的样式：

input::placeholder {
  color: #aaa;
  font-style: italic;
}

3. 输入框交互状态样式

为了提高用户体验，我们需要为输入框的不同状态设计相应的视觉反馈。

3.1 焦点状态

当输入框获得焦点时，改变样式以提供视觉反馈：

input[type="text"]:focus, input[type="password"]:focus {
  border-color: #4A90E2;
  outline: none;
  box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
}

3.2 有效与无效状态

利用CSS伪类为有效和无效的输入提供即时反馈：

/* 有效输入样式 */
input[type="text"]:valid, input[type="password"]:valid {
  border-color: #28a745;
}

/* 无效输入样式 */
input[type="text"]:invalid, input[type="password"]:invalid {
  border-color: #dc3545;
}

4. 高级输入框样式示例

4.1 浮动标签输入框

浮动标签输入框在用户输入时，标签会移动到输入框上方，既节省空间又提升用户体验：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>找找网 - 浮动标签输入框示例</title>
  <style>
    .floating-label {
      position: relative;
      margin-bottom: 20px;
      width: 300px;
    }

    .floating-label input {
      font-size: 18px;
      padding: 10px;
      width: 100%;
      border: none;
      border-bottom: 2px solid #ccc;
      background-color: transparent;
    }

    .floating-label label {
      position: absolute;
      top: 10px;
      left: 10px;
      font-size: 18px;
      color: #ccc;
      pointer-events: none;
      transition: 0.2s all ease;
    }

    .floating-label input:focus + label,
    .floating-label input:not(:placeholder-shown) + label {
      transform: translateY(-20px);
      font-size: 14px;
      color: #1E7ACE;
    }
  </style>
</head>
<body>
  <div class="floating-label">
    <input type="text" id="zzw_username" placeholder=" ">
    <label for="zzw_username">用户名</label>
  </div>

  <div class="floating-label">
    <input type="password" id="zzw_password" placeholder=" ">
    <label for="zzw_password">密码</label>
  </div>
</body>
</html>

4.2 渐变边框输入框

创建具有渐变边框的输入框可以增加视觉吸引力：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>找找网 - 渐变边框输入框示例</title>
  <style>
    .gradient-input {
      width: 400px;
      height: 40px;
      padding: 5px 12px;
      font-size: 16px;
      color: #333;
      outline: none;
      border: 1px solid transparent;
      background: linear-gradient(white, white) padding-box, 
                  linear-gradient(45deg, #ff7eb3, #65d9ff, #c7f464, #ff7eb3) border-box;
      border-radius: 20px;
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }

    .gradient-input:hover {
      background: linear-gradient(white, white) padding-box, 
                  linear-gradient(135deg, #ff0076, #1eaeff, #28ffbf, #ff0076) border-box;
      box-shadow: 0 0 5px rgba(255, 0, 118, 0.5), 0 0 20px rgba(30, 174, 255, 0.5);
    }

    .gradient-input:focus {
      background: linear-gradient(white, white) padding-box, 
                  linear-gradient(45deg, #ff0076, #1eaeff, #28ffbf, #ff0076) border-box;
      box-shadow: 0 0 15px rgba(255, 0, 118, 0.7), 0 0 25px rgba(30, 174, 255, 0.7);
    }
  </style>
</head>
<body>
  <input type="text" class="gradient-input" placeholder="请输入用户名">
  <br><br>
  <input type="password" class="gradient-input" placeholder="请输入密码">
</body>
</html>

4.3 带图标的输入框

在输入框中添加图标可以增强输入框的视觉提示和功能性：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>找找网 - 带图标输入框示例</title>
  <style>
    .input-icon {
      position: relative;
      width: 300px;
      margin-bottom: 20px;
    }

    .input-icon input {
      padding-left: 40px;
      width: 100%;
      height: 40px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 16px;
    }

    .icon {
      position: absolute;
      top: 50%;
      left: 10px;
      transform: translateY(-50%);
      color: #666;
    }
  </style>
</head>
<body>
  <div class="input-icon">
    <span class="icon">@</span>
    <input type="text" placeholder="用户名">
  </div>

  <div class="input-icon">
    <span class="icon">🔒</span>
    <input type="password" placeholder="密码">
  </div>
</body>
</html>

5. 输入框交互功能增强

5.1 使用JavaScript实现动态效果

通过JavaScript可以为输入框添加更复杂的交互功能：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>找找网 - 输入框交互示例</title>
  <style>
    @keyframes zzw_label_animation {
      from {
        top: 0px;
        font-size: 20px;
      }
      to {
        top: -20px;
        font-size: 12px;
        color: #1E7ACE;
      }
    }

    .zzw_input_container {
      position: relative;
      width: 400px;
      height: 80px;
    }

    .zzw_input_container input {
      width: 300px;
      height: 30px;
      color: #333;
      font-size: 20px;
      border: 0px transparent;
      border-bottom: 2px solid #ccc;
      background-color: transparent;
    }

    .zzw_input_container input:focus {
      outline: none;
      border-bottom: 2px solid #1E7ACE;
    }

    .zzw_input_label {
      position: absolute;
      top: 0px;
      left: 0px;
      font-size: 20px;
      color: #666;
    }

    .zzw_label_animated {
      animation: zzw_label_animation 0.3s linear normal forwards;
    }
  </style>
</head>
<body>
  <div class="zzw_input_container">
    <label for="zzw_animated_input" class="zzw_input_label">请输入用户名</label>
    <input type="text" id="zzw_animated_input">
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const zzw_input = document.getElementById('zzw_animated_input');
      const zzw_label = document.querySelector('.zzw_input_label');

      zzw_input.addEventListener('focus', function() {
        zzw_label.classList.add('zzw_label_animated');
      });

      zzw_input.addEventListener('blur', function() {
        if (!this.value) {
          zzw_label.classList.remove('zzw_label_animated');
        }
      });
    });
  </script>
</body>
</html>

5.2 输入验证与反馈

通过CSS和JavaScript结合，实现输入验证和即时反馈：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>找找网 - 输入验证示例</title>
  <style>
    .zzw_validated_input {
      width: 300px;
      height: 40px;
      padding: 5px 10px;
      border: 2px solid #ccc;
      border-radius: 5px;
      font-size: 16px;
      transition: all 0.3s ease;
    }

    .zzw_valid_input {
      border-color: #28a745;
      box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
    }

    .zzw_invalid_input {
      border-color: #dc3545;
      box-shadow: 0 0 5px rgba(220, 53, 69, 0.5);
    }

    .zzw_error_message {
      color: #dc3545;
      font-size: 14px;
      margin-top: 5px;
      display: none;
    }
  </style>
</head>
<body>
  <div>
    <input type="email" id="zzw_email_input" class="zzw_validated_input" placeholder="请输入邮箱地址">
    <div id="zzw_email_error" class="zzw_error_message">请输入有效的邮箱地址</div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const zzw_email_input = document.getElementById('zzw_email_input');
      const zzw_email_error = document.getElementById('zzw_email_error');

      function zzw_validateEmail(email) {
        const re = /^[^s@]+@[^s@]+.[^s@]+$/;
        return re.test(email);
      }

      zzw_email_input.addEventListener('blur', function() {
        if (this.value && !zzw_validateEmail(this.value)) {
          this.classList.add('zzw_invalid_input');
          this.classList.remove('zzw_valid_input');
          zzw_email_error.style.display = 'block';
        } else if (this.value && zzw_validateEmail(this.value)) {
          this.classList.add('zzw_valid_input');
          this.classList.remove('zzw_invalid_input');
          zzw_email_error.style.display = 'none';
        } else {
          this.classList.remove('zzw_valid_input', 'zzw_invalid_input');
          zzw_email_error.style.display = 'none';
        }
      });
    });
  </script>
</body>
</html>

6. 响应式输入框设计

创建适应不同屏幕尺寸的输入框是现代网页设计的基本要求：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>找找网 - 响应式输入框示例</title>
  <style>
    .zzw_responsive_input {
      width: 100%;
      max-width: 500px;
      height: 50px;
      padding: 10px 15px;
      font-size: 16px;
      border: 2px solid #ccc;
      border-radius: 5px;
      box-sizing: border-box;
    }

    /* 平板设备 */
    @media (max-width: 768px) {
      .zzw_responsive_input {
        height: 45px;
        font-size: 15px;
      }
    }

    /* 手机设备 */
    @media (max-width: 480px) {
      .zzw_responsive_input {
        height: 40px;
        font-size: 14px;
        padding: 8px 12px;
      }
    }
  </style>
</head>
<body>
  <div style="padding: 20px; max-width: 500px; margin: 0 auto;">
    <input type="text" class="zzw_responsive_input" placeholder="响应式输入框 - 调整浏览器窗口大小查看效果">
  </div>
</body>
</html>

7. 输入框无障碍设计

确保输入框对所有用户都可访问是非常重要的设计考虑因素：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>找找网 - 无障碍输入框示例</title>
  <style>
    .zzw_accessible_input {
      width: 300px;
      height: 40px;
      padding: 5px 10px;
      font-size: 16px;
      border: 2px solid #333;
      border-radius: 5px;
      background-color: #fff;
      color: #333;
    }

    .zzw_accessible_input:focus {
      outline: 3px solid #1E7ACE;
      outline-offset: 2px;
    }

    .zzw_high_contrast {
      border-color: #000;
      background-color: #fff;
      color: #000;
    }
  </style>
</head>
<body>
  <form>
    <div>
      <label for="zzw_accessible_name" style="display: block; margin-bottom: 5px;">
        姓名 <span style="color: #dc3545;">*</span>
      </label>
      <input type="text" id="zzw_accessible_name" 
             class="zzw_accessible_input" 
             aria-required="true"
             aria-describedby="zzw_name_help">
      <div id="zzw_name_help" style="font-size: 14px; color: #666; margin-top: 5px;">
        请输入您的真实姓名
      </div>
    </div>
  </form>
</body>
</html>

8. 完整示例：美观的登录表单

下面是一个结合了多种技术的完整登录表单示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>找找网 - 登录表单示例</title>
  <style>
    :root {
      --primary-color: #1E7ACE;
      --primary-dark: #155a8a;
      --error-color: #dc3545;
      --success-color: #28a745;
      --gray-light: #f4f4f9;
      --gray: #ccc;
      --gray-dark: #666;
    }

    .zzw_login_container {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: var(--gray-light);
      padding: 20px;
    }

    .zzw_login_form {
      width: 100%;
      max-width: 400px;
      background: white;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .zzw_form_group {
      position: relative;
      margin-bottom: 30px;
    }

    .zzw_form_input {
      width: 100%;
      height: 50px;
      padding: 10px 15px;
      font-size: 16px;
      border: 2px solid var(--gray);
      border-radius: 5px;
      background-color: transparent;
      transition: all 0.3s ease;
      box-sizing: border-box;
    }

    .zzw_form_input:focus {
      border-color: var(--primary-color);
      outline: none;
      box-shadow: 0 0 0 3px rgba(30, 122, 206, 0.1);
    }

    .zzw_form_label {
      position: absolute;
      top: 15px;
      left: 15px;
      font-size: 16px;
      color: var(--gray-dark);
      pointer-events: none;
      transition: all 0.3s ease;
      background-color: white;
      padding: 0 5px;
    }

    .zzw_form_input:focus + .zzw_form_label,
    .zzw_form_input:not(:placeholder-shown) + .zzw_form_label {
      top: -10px;
      font-size: 12px;
      color: var(--primary-color);
    }

    .zzw_submit_btn {
      width: 100%;
      height: 50px;
      background-color: var(--primary-color);
      color: white;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .zzw_submit_btn:hover {
      background-color: var(--primary-dark);
    }

    .zzw_error_message {
      color: var(--error-color);
      font-size: 14px;
      margin-top: 5px;
      display: none;
    }

    @media (max-width: 480px) {
      .zzw_login_form {
        padding: 20px;
      }

      .zzw_form_input {
        height: 45px;
        font-size: 15px;
      }
    }
  </style>
</head>
<body>
  <div class="zzw_login_container">
    <form class="zzw_login_form" id="zzw_login_form">
      <h2 style="text-align: center; margin-bottom: 30px; color: #333;">用户登录</h2>

      <div class="zzw_form_group">
        <input type="text" id="zzw_login_username" class="zzw_form_input" placeholder=" ">
        <label for="zzw_login_username" class="zzw_form_label">用户名</label>
        <div id="zzw_username_error" class="zzw_error_message">请输入用户名</div>
      </div>

      <div class="zzw_form_group">
        <input type="password" id="zzw_login_password" class="zzw_form_input" placeholder=" ">
        <label for="zzw_login_password" class="zzw_form_label">密码</label>
        <div id="zzw_password_error" class="zzw_error_message">请输入密码</div>
      </div>

      <button type="submit" class="zzw_submit_btn">登录</button>
    </form>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const zzw_form = document.getElementById('zzw_login_form');
      const zzw_username_input = document.getElementById('zzw_login_username');
      const zzw_password_input = document.getElementById('zzw_login_password');
      const zzw_username_error = document.getElementById('zzw_username_error');
      const zzw_password_error = document.getElementById('zzw_password_error');

      function zzw_validateForm() {
        let isValid = true;

        if (!zzw_username_input.value.trim()) {
          zzw_username_error.style.display = 'block';
          zzw_username_input.style.borderColor = 'var(--error-color)';
          isValid = false;
        } else {
          zzw_username_error.style.display = 'none';
          zzw_username_input.style.borderColor = 'var(--success-color)';
        }

        if (!zzw_password_input.value) {
          zzw_password_error.style.display = 'block';
          zzw_password_input.style.borderColor = 'var(--error-color)';
          isValid = false;
        } else {
          zzw_password_error.style.display = 'none';
          zzw_password_input.style.borderColor = 'var(--success-color)';
        }

        return isValid;
      }

      zzw_form.addEventListener('submit', function(event) {
        event.preventDefault();
        if (zzw_validateForm()) {
          // 表单提交逻辑
          alert('登录成功！');
        }
      });

      // 实时验证
      zzw_username_input.addEventListener('input', function() {
        if (this.value.trim()) {
          zzw_username_error.style.display = 'none';
          this.style.borderColor = 'var(--success-color)';
        }
      });

      zzw_password_input.addEventListener('input', function() {
        if (this.value) {
          zzw_password_error.style.display = 'none';
          this.style.borderColor = 'var(--success-color)';
        }
      });
    });
  </script>
</body>
</html>

总结

知识点总结

知识点内容描述
输入框基础输入框通过HTML的<input>标签创建，可通过type属性定义不同类型
基本样式控制使用CSS控制输入框的尺寸、边框、背景和文字样式是美化输入框的基础
交互状态样式为输入框的不同状态（如焦点、有效、无效）设计样式可以提高用户体验
浮动标签模式浮动标签在用户输入时会移动到输入框上方，节省空间且提升用户体验
渐变边框设计使用CSS渐变和background-clip属性可以创建具有渐变边框的输入框
图标集成在输入框中添加图标可以增强视觉提示和功能性
输入验证反馈通过CSS和JavaScript结合，实现输入验证和即时反馈
响应式设计使用媒体查询确保输入框在不同屏幕尺寸上有良好的显示效果
无障碍设计通过适当的标签、ARIA属性和高对比度设计确保输入框对所有用户都可访问

通过本教程的学习，您可以创建出既美观又实用的输入框，提升网站表单的用户体验。找找网建议根据实际项目需求选择合适的输入框样式，并始终考虑用户体验和无障碍访问的要求。

, , ,