﻿/* ********** 纯属CSS搜索框，示例：**********
    <div class="sBox01">
        <form action="xxx">
            <img src="v2023image/searchDL.png" class="sImg" alt=""/>
            <input type="text" placeholder="全文检索" class="sBox02 f20 fontSourceHanSerifCN-Medium">
        </form>                                
    </div>
*/

/*外部定位div*/
.sBox01 {
    position: absolute;
    top: 20px;
    right: 0;
    
    width: 35px;
    height: 60px;
    
    overflow: hidden;
    
    transition: 0.5s;
    
    /*background-color: red;*/
}
/*鼠标指向，放大，显示文本框*/
.sBox01:hover {
    width: 400px;
}
/*搜索按钮*/
.sImg {
    position: absolute;
    top: 15px;
    right: 0;
    
    width: 30px;
    height: 30px;
    
    cursor: pointer;
}
/*内部文本框*/
.sBox02 {
    width: 300px;
    height: 40px;
    
    position: absolute;
    top: 8px;
    right: 40px;
    
    border-radius: 20px;
    background-color: white;
    text-indent: 20px;
    border: 1px white solid;
}

/* ********** 纯属CSS搜索框，示例，结束 ***********/

.f20 {
  font-size: 20px;
}



