输入框输入特效，让你的表单更加生动！

2023-09-21 17:47:07

This field cannot be empty

/* CSS */

#wrapper {
  text-align: center;
}

#input_container {
  position: relative;
  display: inline-block;
  width: 250px;
  margin: 0 auto;
}

#input_field {
  position: relative;
  width: 100%;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

#input_field input {
  width: 100%;
  height: 100%;
  padding: 10px;
  border: none;
  outline: none;
}

#underline {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: #000;
  transition: width 0.3s ease-in-out;
}

#error_msg {
  display: none;
  position: absolute;
  left: 0;
  top: 50px;
  width: 100%;
  color: #ff0000;
}

/* JavaScript */

const inputField = document.getElementById('input_field');
const underline = document.getElementById('underline');
const errorMsg = document.getElementById('error_msg');

inputField.addEventListener('input', (e) => {
  if (e.target.value !== '') {
    underline.style.width = '100%';
    errorMsg.style.display = 'none';
  } else {
    underline.style.width = '0';
    errorMsg.style.display = 'block';
  }
});

在前端开发中，输入框是一个非常常见的元素。为了让输入框更加美观，我们可以使用CSS为其添加各种特效。其中，一种非常流行的特效就是输入框输入特效。

输入框输入特效有很多种，我们可以根据自己的需要选择不同的特效。比如，我们可以让输入框在用户输入时出现下划线、波浪线或其他形状的线条。还可以让输入框在用户输入时改变颜色或背景色。

今天，我们将介绍一种非常简单的输入框输入特效。这种特效非常容易实现，即使是新手也可以轻松掌握。我们只需要使用CSS的伪元素来创建一个下划线，并在用户输入时使其动画化。

实现步骤

首先，我们需要创建一个输入框。我们可以使用<input>标签来创建一个输入框。

<input type="text" placeholder="Type something">

接下来的，我们需要使用CSS来为输入框添加下划线。我们可以使用::after伪元素来创建一个下划线。

input::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: #000;
  transition: width 0.3s ease-in-out;
}