CSS 只有底部边框的输入文本框

在本文中，我们将介绍如何使用CSS创建一个只有底部边框的输入文本框。这种效果可以为用户提供一个简洁而现代的界面，使输入框与其他元素的样式相协调。我们将通过示例代码和解释来演示如何实现这一效果。

阅读更多：CSS 教程

实现方法

要创建一个只有底部边框的输入文本框，我们可以使用CSS的伪元素和伪类来实现。我们需要使用:after伪元素来创建底部边框，并使用:focus伪类来为输入文本框添加焦点样式。以下是实现这种效果的代码：

input {
  border: none;
  border-bottom: 2px solid #ccc;
  outline: none;
  padding: 5px 0;
  transition: border-color 0.3s;
}

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

input::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #007bff;
  transition: width 0.3s;
}

input:focus::after {
  width: 100%;
}

在上面的代码中，我们首先设置了输入文本框的样式，包括底部边框的颜色、宽度和转换效果。然后，我们使用:focus伪类为文本框添加焦点样式，改变边框颜色以及通过伪元素:after实现底部边框的动画效果。最后，我们通过设置伪元素的宽度来实现底部边框的动画效果。

示例

下面是一个示例，展示了如何使用上述代码创建一个只有底部边框的输入文本框。

<!DOCTYPE html>
<html>
<head>
  <title>CSS Input Text Field with Only Bottom Border</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <h1>示例</h1>
  <input type="text" placeholder="请输入文本">
</body>
</html>

在上面的示例中，我们将CSS代码保存在名为styles.css的外部样式表中，并将其链接到HTML文档中。通过在输入文本框中输入内容，你将看到只有底部边框的输入文本框。