GitHub 6740★

Have you seen CSS Scan?

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

Learn more →

CSS Scan logo

Input addon

HTML

<!-- Add-on prepended -->
<div class="input-addon">
<!-- Add-on -->
<div class="input-addon__addon input-addon__addon--prepended">
...
</div>

<!-- Input -->
<input type="text" class="input-addon__input" />
</div>

<!-- Add-on appended -->
<div class="input-addon">
<!-- Input -->
<input type="text" class="input-addon__input" />

<!-- Add-on -->
<div class="input-addon__addon input-addon__addon--appended">
...
</div>
</div>

<!-- Appended and prepended add-ons -->
<div class="input-addon">
<!-- Add-on -->
<div class="input-addon__addon input-addon__addon--prepended">
...
</div>

<!-- Input -->
<input type="text" class="input-addon__input" />

<!-- Add-on -->
<div class="input-addon__addon input-addon__addon--appended">
...
</div>
</div>

CSS

.input-addon {
border: 1px solid #d1d5db;
border-radius: 0.25rem;
display: flex;
}

.input-addon__input {
border: none;

/* Take the remaining width */
flex: 1;
}

.input-addon__addon {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
}

.input-addon__addon--prepended {
border-right: 1px solid #d1d5db;
}
.input-addon__addon--appended {
border-left: 1px solid #d1d5db;
}
Demo
Follow me on and to get more useful contents.