Simple Search box with icon

It’s like this:

Here is the code:

<input class=”search” type=”search” placeholder=”Search…”>

input.search {
width: 260px;
border: 1px solid #555;
display: block;
padding: 9px 4px 9px 40px;
…


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Kurapati Mahesh

It's like this:

Image description

Here is the code:


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


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

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


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Kurapati Mahesh


Print Share Comment Cite Upload Translate Updates
APA

Kurapati Mahesh | Sciencx (2022-12-17T12:28:08+00:00) Simple Search box with icon. Retrieved from https://www.scien.cx/2022/12/17/simple-search-box-with-icon/

MLA
" » Simple Search box with icon." Kurapati Mahesh | Sciencx - Saturday December 17, 2022, https://www.scien.cx/2022/12/17/simple-search-box-with-icon/
HARVARD
Kurapati Mahesh | Sciencx Saturday December 17, 2022 » Simple Search box with icon., viewed ,<https://www.scien.cx/2022/12/17/simple-search-box-with-icon/>
VANCOUVER
Kurapati Mahesh | Sciencx - » Simple Search box with icon. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/12/17/simple-search-box-with-icon/
CHICAGO
" » Simple Search box with icon." Kurapati Mahesh | Sciencx - Accessed . https://www.scien.cx/2022/12/17/simple-search-box-with-icon/
IEEE
" » Simple Search box with icon." Kurapati Mahesh | Sciencx [Online]. Available: https://www.scien.cx/2022/12/17/simple-search-box-with-icon/. [Accessed: ]
rf:citation
» Simple Search box with icon | Kurapati Mahesh | Sciencx | https://www.scien.cx/2022/12/17/simple-search-box-with-icon/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts