css搜索文本框 |html背景图片css

搜索文本框是Web界面中使用频率很高的一个控件，通过CSS样式来美化搜索文本框也是非常常见的一种需求。下面大家将详细介绍如何通过CSS来美化搜索文本框。首先大家需要创建一个HTML页面，并添加一个搜索文本框的代码。代码如下：

<form action="#" method="get">
<input type="text" name="search" placeholder="请输入关键字">
<button type="submit"><i class="fas fa-search"></i></button>
</form>

在这段代码中，大家使用了HTML5中的input标签来创建了一个文本输入框，通过name属性来定义文本框的名称，通过placeholder属性来定义输入框中的提示信息。另外，大家还添加了一个搜索按钮，通过type属性来定义按钮的类型为submit，当用户点击搜索按钮时将会提交表单内容。接下来，大家就可以使用CSS样式来美化这个搜索输入框了。常见的搜索文本框样式包括搜索框背景色、边框样式、圆角、阴影等。

p {
font-size: 16px;
font-weight: bold;
}
input[type="text"] {
padding: 10px;
border: none;
border-radius: 5px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
background-color: #f2f2f2;
}
button[type="submit"] {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #3e8e41;
}

在上面的代码中，大家为input[type=”text”]选择器设置了背景颜色、边框样式、圆角和阴影等样式，从而使其看起来更加美观。大家还为button[type=”submit”]选择器设置了背景颜色、边框样式、圆角、光标样式等样式，当用户将鼠标移到搜索按钮上时，按钮的背景颜色会发生改变，以提示用户可以通过点击进行搜索操作。通过上述步骤，大家就可以非常轻松地实现一个美观的搜索文本框样式了，这将有助于提高网站的用户体验和视觉效果。