Question

我有一个截图如下所示，我必须在HTML / CSS中复制..

我为上面的屏幕截图创建了fiddle（还有一些工作还有待完成）。我为了制作小提琴而使用的HTML和CSS代码片段是：

HTML：

<div class="nav-top-searchbar">
    <form>
        <input type="text" name="search">
        <span class=" fa fa-search searchicon" aria-hidden="true "></span>
    </form>
</div>

CSS：

.nav-top-searchbar {
    position: relative;
    background-color: #244A64;
    padding: 1%;
}

.searchicon {
    position: absolute;
    left: 25px;
    top: 25px;
    border: 1px solid #FFFFFF;
    border-radius: 3.5px;
    padding: 6px;
}

input[type=text] {
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #244A64;
    font-size: 16px;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
    width: 100%;
}

问题陈述：

（1）我想知道我需要在上面的CSS代码中进行哪些更改，以便在白色方形边框上点击时在搜索图标的屏幕截图中标有箭头，它应该以类似于this的方式展开。

在周围的方形边框扩展到搜索图标后，我们可以进行手动搜索。

纯白色方形边框的扩展应涵盖蓝色条的<50％。

（2）此外，在我的小提琴中，我想删除最外面的白色方形边框。

注意：

搜索图标周围的白色方框边框应始终显示为深蓝色条内。

Answer 1

试试这个

     .nav-top-searchbar {
        position: relative;
        background-color: #244A64;
        padding: 1%;
    }
    
    .searchicon {
        position: absolute;
        left: 25px;
        top: 25px;
        border: 1px solid #FFFFFF;
        border-radius: 3.5px;
        padding: 6px;
    }
    
    
    
    input[type=text] {
        width: 130px;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 4px;
        background-color: #244A64;
        font-size: 16px;
        background-position: 10px 10px;
        background-repeat: no-repeat;
        padding: 12px 20px 12px 40px;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;
    }
    
    input[type=text]:focus {
        width: 50%;
    }

      <div class="nav-top-searchbar">
        <form>
            <input id="sc1" type="text" name="search">
            <span id="sc" class=" fa fa-search searchicon" aria-hidden="true "></span>
        </form>
    </div>
    <script>
    document.getElementById("sc1").onfocus = function(){
  document.getElementById("sc").style.display = "none";
}

document.getElementById("sc").onclick = function(){
  document.getElementById("sc1").style.width = "50%";
 this.style.display = "none";
}
    </script>

在CSS中的蓝色栏内的动画搜索表单

1 个答案: