This is how to style a search box like the one Instagram has on their website.

Have you seen the great looking search box on Instagram’s website? Me too. I wanted to do something similar for a project I am working on and I thought I would share the results…so this is a quickie tutorial on how to style a text input to look like Instagram’s search. We are not going to cover the great autocomplete function that their search provides, mostly because I do not know how to do that yet. Anyhow…this is what it looks like:

And, here is how to do it:

css

input[type=text].instaSearch {
    font-family: proxima-nove, 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight:300;
    letter-spacing: .5px;
    height:30px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid #edeeee;
    background: #fafafa;
    background-image: url("glass.png");
    background-repeat: no-repeat;
    background-size: 13px 13px;
    background-position: 85px 7px;
    outline: none;
    width: 250px;
    margin-top: 10px;
    margin-bottom: 15px;
    color: #c9cbcc;
    
}
input[type=text]:focus.instaSearch {
    text-align: left;
    padding-left: 30px;
    background: #ffffff;
    background-image: url("glass.png");
    background-repeat: no-repeat;
    background-size: 13px 13px;
    background-position: 15px 7px;
    color: #000;
}

input:focus::-webkit-input-placeholder {
     color: #c9cbcc;
}
input:focus::-moz-placeholder {
     color: #c9cbcc;
}
input:focus::-moz-placeholder {   /* Older versions of Firefox */
     color: #c9cbcc;
}
input:focus::-ms-input-placeholder { 
     color: #c9cbcc;
}

html

<div class="searchWrap">
     <form action="index.php" method="post">
          <input type="text" name="subject" class="instaSearch" value="" placeholder="Search">
     </form>
</div>

  
One drawback to this method is that if more than a few short words are entered, they will cover the magnifying glass when the text input is out of focus. Instagram solves this with Javascript to make the magnifying glass float 6 pixels to the left of the entered text. For my project, I used a more simple solution…I put the magnifying glass all the way to the left and kept it there whether the input was in focus or not.