1. 简介
CSS是网页开发中不可或缺的一部分，它负责网页的样式，使网页看上去更加美观、易于使用。输入框是网站中经常使用的组件之一，本文将为您介绍如何使用CSS创建简单大气的输入框。
2. 准备工作
在编写代码之前，我们需要准备一个HTML文件来放置输入框。下面是一个基本的模板：
<!DOCTYPE html>
<html>
<head>
<title>创建输入框</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="input-container">
<input type="text" placeholder="请输入">
</div>
</body>
</html>
这个模板包含一个带有占位符的文本输入框（placeholder attribute），以及一个将来将要使用的CSS样式表（link tag）。
2.1 样式表
我们需要为输入框制定样式，因此我们需要创建一个CSS文件。我们可以在head标签中使用link tag引入它。
<link rel="stylesheet" type="text/css" href="style.css">在style.css文件中，我们可以为输入框指定一些样式。
3. 设计样式
3.1 位置和大小
我们将开始使用CSS为输入框设置样式。我们首先要设置输入框的位置和大小。
下面是一个基本的CSS文件，它包含了一个名为input-container的类（class），并将其设置为在页面中居中显示。此外，它还定义了输入框的大小和边框样式：
.input-container {
margin: 0 auto;
width: 60%;
}
.input-container input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
}
上面这段CSS代码定义了一个名为<input class="language-css" readonly="">.input-container</input>的类，它将位于页面中央，并且其宽度为60%。
接下来，我们为输入框定义样式。我们将使用[type=text]选择器选择文本输入框，并对其进行修改。我们还为输入框指定了宽度和内边距（padding），为其添加上下8px和左右12px边距。我们还使用box-sizing设置了输入框的大小，使其在设置了内边距的情况下正确工作。
我们还对输入框的边框进行了定义：border-style设置为solid，border-width设置为2px，同时定义了圆角，让输入框更加美观。
3.2 颜色和字体
接下来，我们将为输入框指定颜色和字体：
.input-container input[type=text] {
/* ... */
color: #333;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
}
在上述CSS代码中，我们为输入框设置了黑色前景色，字体大小为18px，Arial字体和sans-serif字体栈。
3.3 聚焦和悬停
最后，我们为聚焦和悬停状态的输入框添加了样式：
.input-container input[type=text]:focus {
border-color: #4CAF50;
}
.input-container input[type=text]:hover {
border-color: #555;
}
我们为输入框在聚焦和悬停状态下设置了不同的边框颜色，以简单但明显的方式为用户提供反馈。
4. 结论
现在，我们已经成功地创建了一个简单大气的输入框。我们使用了CSS为文本输入框设置不同的样式，并且在聚焦和悬停状态下为其添加了反馈。
在CSS方面还有很多要学习，在熟悉了本文介绍的一些基础之后，您可以深入学习CSS，掌握更多的技术。