CODEWITHSUNDEEP
javascriptjqueryhtmlcsssearch
flash
flash

Reputation: 1519

animated search form inside blue bar in css

I have a screenshot as shown below which I have to replicate in HTML/CSS..

enter image description here

I have created the fiddle for the above screen-shot (still some work left to be done). The snippets of HTML and CSS codes which I have used in order to make the fiddle is:

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%;
}


Problem Statement:

(1) I am wondering what changes do I need to make in the above CSS codes so that if I hit on the surrounded white square border (marked with arrow in the screenshot) across the search-icon, it should expand in a way similar to this.

After the surrounding square border expands across the search-icon, we can do manual search.

The expansion of the solid white square border should cover 50% of the blue bar.

(2) Also, in my fiddle, I want to remove the outer most surrounded white square border.


Note:

The surrounding white square border across the search icon should be always present inside the dark blue bar.

Upvotes: 3

Views: 139

Answers (1)

Friday Ameh
Friday Ameh

Reputation: 1684

Try this 

     .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>

Upvotes: 1

Related Questions