css ——搜索框（精灵技术)

这里写自定义目录标题

• • • 一、搜索框（精灵技术)
    • • • 结构伪类选择器：

一、搜索框（精灵技术)

未点击的效果图

点击后的效果图

html

<section class="shop-sousu">
               <input type="text" name="" id="" placeholder="搜索偶像、商品">
               <span class="sectbtn"></span>
              </section>

这里用的是sass写的（影响不大）css

.shop-sousu {
            display: flex;
            height: 30px;
            padding-top: 23px;
            padding-left: 200px;
            box-sizing: border-box;
            position: relative;


            input {
                border: none;
                width: 430px;
                height: 40px;
                background-image: url(/img/icon/search_icon.png);
                background-repeat: no-repeat;
                background-position: 0 -44px;
                background-color: transparent; //input背景色透明
                outline: none; //内框线去掉
                padding-left: 2em;
                
                // 选择获得焦点的输入字段
                &:focus {
                    background-position: 0 0;
                }
                // 放大镜按钮点击点击后
                &:focus+span {
                    display: block;
                    color: white;
                    // border: 1px solid red;
                    width: 20px;
                    height: 20px;
                    background-image: url(/img/icon/search_icon.png);//背景图片
                    background-repeat: no-repeat;//背景不平铺
                    background-position: -465px -52px;
                    position: absolute;//绝对定位
                    top: 32px;
                    right: 11px;
                }
            }

            // 放大镜按钮点击前
            .sectbtn {
                
                display: block;
                color: white;
                // border: 1px solid red;
                width: 20px;
                height: 20px;
                background-image: url(/img/icon/search_icon.png);
                background-repeat: no-repeat;
                background-position: -465px -10px;
                position: absolute;
                top: 32px;
                right: 10px;

            }


        }

:focus伪元素选择器：是选择获得焦点的输入字段，并设置其样式：例如：用户单击一个input输入框获取焦点，然后这个input输入框的边框样式就会发生改变，和其他的输入框区别开来，表明已被选中

结构伪类选择器：

背景颜色透明
background-color: transparent;
背景平铺
background-repeat : repeat | no-repeat | repeat-x | repeat-y

可以改变图片在背景中的位置
background-position : x y;

设置背景图像是否固定或者随着页面的其余部分滚动
background-attachment : scroll | fixed