[分享]css3搜索框怎么加图片

CSS3搜索框是Web开发中常用的一个组件，它可以提供搜索功能，方便用户快速定位相关信息。另外，通过添加图片，可以使搜索框更加美观和易于识别。/搜索框CSS代码/ .searchbox{ : rela...

CSS3搜索框是Web开发中常用的一个组件，它可以提供搜索功能，方便用户快速定位相关信息。另外，通过添加图片，可以使搜索框更加美观和易于识别。

/*搜索框CSS代码*/
.search-box{
    position: relative;
    margin: 20px auto;
    width: 300px;
}
.search-box input[type='text']{
    border: none;
    background: #f2f2f2;
    font-size: 16px;
    padding: 10px;
    width: 100%;
    border-radius: 5px;
}
.search-box input[type='text']:focus{
    outline: none;
    box-shadow: 0px 0px 2px #868e96;
}
.search-box button{
    border: none;
    background: #00bfff;
    color: #fff;
    font-size:17px;
    padding:10px 15px;
    cursor:pointer;
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 0 5px 5px 0;
}

/*添加图片CSS代码*/
.search-icon {
    position: absolute;
    top: 10px;
    left: 10px;
    height: 20px;
    width: 20px;
    background: url('search.png') no-repeat center;
} 

在上面的代码中，搜索框的输入框和按钮都被定义了相应的CSS样式，而添加图标的CSS样式则需要添加一个“search-icon”类，并将其设置为绝对定位，然后将所需的图片作为背景。

此外，如果您希望将图片作为按钮样式，您可以使用以下CSS代码:

.search-btn{
    border: none;
    background: url('search.png') no-repeat center;
    width: 50px;
    height: 50px;
    cursor: pointer;
} 

通过上面的CSS代码，您可以将搜索按钮的背景设为所需的图片，并设置按钮的宽度和高度。

总之，这些CSS技巧可以使您的搜索框更加美观、易于识别，提高用户的体验。