DEV Community

Kurapati Mahesh
Kurapati Mahesh

Posted on

Simple Search box with icon

It's like this:

Image description

Here is the code:


<input class="search" type="search" placeholder="Search...">

Enter fullscreen mode Exit fullscreen mode
    input.search {
        width: 260px;
        border: 1px solid #555;
        display: block;
        padding: 9px 4px 9px 40px;
        background: transparent url("/assets/search.svg") no-repeat 13px;
    }
Enter fullscreen mode Exit fullscreen mode

padding top, left, bottom, right - Places placeholder named Search just beside icon inside input.

download svg from any icon store say bootstrap and place inside folder.

background property - color, image, repeat, position - Places search icon in proper place in search box.

Thanks.

U can follow me here: urstrulyvishwak

Top comments (0)