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)

Super Useful CSS Resources

A collection of 70 hand-picked, web-based tools which are actually useful.
Each will generate pure CSS without the need for JS or any external libraries.