CSS和Input是网页开发中常用的两个技术，它们可以让我们的页面变得更加美观和实用。而添加图标则可以为页面增添一些独特的风格和特点。今天，我们来看一看如何结合这三个技术来打造一个更加完美的页面。

<input type="text" class="icon-input" placeholder="请输入关键字">

首先，我们先来看一下如何在Input中添加图标。我们可以通过CSS中的伪类选择器before和after来实现。比如，在上述代码中加入以下代码：

.icon-input::before {
content: url(search-icon.png);
position: absolute;
left: 10px;
top: 10px;
width: 20px;
height: 20px;
}

在这个例子中，我们使用了search-icon.png作为图片，并使用了伪类选择器before来添加。需要注意的是，在使用这个方法时，要给伪类选择器设置position: absolute;，否则图标不会显示。

接下来，我们可以对Input进行一些样式的调整，使其更加美观。比如，我们给Input加上了边框、圆角和阴影：

.icon-input {
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
padding: 10px 10px 10px 40px;
}

最后，我们来看一下这个Input的效果：

如此一来，我们就通过CSS和Input的技术，并结合添加图标的方法，打造了一个美观实用的搜索框。这不仅可以让我们的页面变得更加完美，还可以提高用户的体验和使用效率。