GitHub 6740★

Have you seen CSS Scan?

The fastest and easiest way to check, copy and edit CSS.

Learn more →

CSS Scan logo

Search box

HTML

<div class="search-box">
<!-- Text input -->
<input type="text" class="search-box__input" />

<!-- Search icon sticks to the left or right -->
...
</div>

CSS

.search-box {
display: flex;

/* If you want to place the icon before the text input */
flex-direction: row-reverse;

/* Border */
border: 1px solid #d1d5db;
}

.search-box__input {
border-color: transparent;
/* Take available width */
flex: 1;
}
Demo
Follow me on and to get more useful contents.