css搜索栏里加图片 |css3 3d连线特效

/*搜索框样式*/
.search-bar {
position: relative;
}
/*图标样式*/
.search-icon {
width: 20px;
height: 20px;
position: absolute;
top: 50%;
left: 10px;
margin-top: -10px;
background-image: url('search-icon.png');
background-size: cover;
}
/*输入框样式*/
.search-input {
padding-left: 35px;
border: none;
outline: none;
font-size: 16px;
height: 30px;
width: 200px;
}

大家首先需要给搜索框的容器添加一个相对定位的样式，然后在输入框前面添加一个绝对定位的图标。图标的定位可以通过“top”和“left”属性进行调整。在这个例子中，大家让图标向左偏移10像素并垂直居中。

图标的图像可以通过CSS的“background-image”属性来设置。大家还可以使用“background-size”属性来确保图标的大小适合要求。在这个例子中，大家使用“cover”选项将图标缩放至与容器相同大小。

最后，大家需要调整输入框的“padding-left”属性以留出图标的空间。这样，在搜索框中输入的文本将不会与图标发生重叠。