css圆形搜索框代码 |h5 css3个人主页

.search {
width: 40px;
height: 40px;
border-radius: 50%;
background: #eee;
position: relative;
overflow: hidden;
}
.search input[type="text"] {
width: 100%;
height: 100%;
background: transparent;
outline: none;
font-size: 16px;
padding: 10px;
border: none;
box-sizing: border-box;
}
.search .fa {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 18px;
color: #333;
}

首先，大家创建了一个具有圆角边框、宽度和高度为40像素、背景颜色为#eee的元素， 这就是搜索框的圆形样式。

然后，使用数据类型选择器指定输入框元素。设置输入框的宽度和高度为100%，使其铺满整个圆形。另外，大家还指定了文字和边框的大小，并去掉了边框，使其看起来更加简洁。

最后，大家通过图标的绝对定位、上下左右的50%的位置移动并在水平和垂直方向上进行变换来将图标放置在圆形搜索框的中心， 从而使整个框看起来更加完整。

这就是如何轻松地实现圆形搜索框，享受它带来的美好视觉效果吧！