输入框选中交互动效，让你的表单体验更棒

2023-12-21 16:11:59

使用 CSS 创造引人注目的输入框选中交互效果

简介

输入框是网站设计中至关重要的元素，它们允许用户提供信息并与网站进行交互。然而，传统的输入框外观往往过于单调，无法引起用户注意或提供交互感。幸运的是，CSS 提供了一种通过添加选中交互效果来增强输入框美学和可用性的简单方法。

使用 CSS 实现输入框选中效果

创建输入框选中效果涉及定义两种样式：输入框本身的默认样式和选中时的样式。默认样式决定了输入框在未选中时的外观，而选中样式则定义了输入框在选中时的外观和行为。

默认样式

input {
  border: 1px solid #ccc;
  background-color: #fff;
  padding: 5px;
}

border: 定义输入框的边框宽度和颜色。
background-color: 定义输入框的背景颜色。
padding: 定义输入框内文本和边框之间的间距。

选中样式

input:checked {
  box-shadow: 0 0 5px #000;
  background-color: #eee;
}

box-shadow: 定义输入框在选中时的阴影效果。
background-color: 定义输入框在选中时的背景颜色。

代码示例

<!DOCTYPE html>
<html>
<head>
  <style>
    input {
      border: 1px solid #ccc;
      background-color: #fff;
      padding: 5px;
    }

    input:checked {
      box-shadow: 0 0 5px #000;
      background-color: #eee;
    }
  </style>
</head>
<body>
  <form>
    <input type="checkbox" id="checkbox-1">
    <label for="checkbox-1">复选框</label>

    <input type="radio" id="radio-1" name="radio-group">
    <label for="radio-1">单选框</label>

    <input type="text" id="text-1" placeholder="文本框">
  </form>
</body>
</html>