css怎么做搜索框的标志

CSS中实现搜索框的标志非常简单，只需要用伪元素:before或:after即可。

/* 实现一个放大镜搜索图标 */.search-box:before {
        content: '';
        display: inline-block;
        width: 10px;
        height: 10px;
        border: 2px solid #666;
        border-radius: 50%;
        position: absolute;
        top: 12px;
        left: 12px;
}
.search-box:after {
        content: '';
        display: inline-block;
        width: 3px;
        height: 3px;
        background-color: #666;
        border-radius: 50%;
        position: absolute;
        top: 15px;
        left: 15px;
}
    

上面的代码实现了一个放大镜搜索图标，通过:before和:after伪元素创建了两个圆圈，分别表示镜头和手柄。

其中，content属性指定伪元素内容为空，display属性设置为inline-block让它们能像其他元素一样布局，width和height属性指定宽高，border和border-radius属性用来设置圆形边框和圆角。

position属性用来定位，将其设置为absolute后，top和left属性就可以控制它们的位置。

将上面的代码应用到搜索框的父元素中，就可以实现一个带有搜索图标的搜索框了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！