An Interest In:
Web News this Week
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
December 17, 2022 12:28 pm GMT
Original Link: https://dev.to/urstrulyvishwak/simple-search-box-with-icon-274l
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; 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
Original Link: https://dev.to/urstrulyvishwak/simple-search-box-with-icon-274l
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To