HTML
<div class="container demo-container">
<form onsubmit="alert('Demo');return false" class="d-flex flex-sm-row flex-column align-items-center justify-content-center">
<select class="form-select demo-form-select">
<option value="title">Title</option>
<option value="content">Content</option>
<option value="notes">Notes</option>
</select>
<input name="search" class="form-control me-1 shadow-none search-input" autocomplete="off" type="search" placeholder="Search" aria-label="Search">
<button type="submit" class="btn btn-warning btn-search"> Search</button>
</form>
</div>
CSS
.demo-container {
margin: 4em auto;
max-width: 600px;
}
.demo-container .btn-search {
margin-left: -20px;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.demo-container .btn-search::before {
content: "\f002";
font-family: FontAwesome;
color: #FFFFFF;
float: left;
}
.demo-container .search-input {
padding-right: 40px;
border-right: 0;
border-left: 0;
border-radius: 0;
width: 300px;
outline: none !important;
outline: 0 !important;
}
.demo-container .form-select {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
width: 120px;
background-color: #F0F0F0;
outline: none !important;
outline: 0 !important;
}
.demo-container textarea:focus,
.demo-container input[type="search"]:focus,
.demo-container input[type="submit"]:focus,
.demo-container .form-select:focus,
.demo-container .btn:focus {
border-color: rgba(208, 212, 218, 0.9);
box-shadow: none !important;
outline: 0 none !important;
}
@media only screen and (max-width: 600px) {
.demo-container .form-select {
width: 100%;
margin-bottom: 1em;
}
.demo-container .btn-search {
margin-left: 0;
margin-top: 1em;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
width: 100%;
}
.demo-container .search-input {
padding-right: 0;
border-right: 1px solid rgba(208, 212, 218, 0.9);
border-left: 1px solid rgba(208, 212, 218, 0.9);
border-radius: 4px;
width: 100%;
outline: none !important;
outline: 0 !important;
}
}
Arrow at the bottom
Arrow at the bottom with a utf-8 character
Arrow at the top of a container
Aside
Background color
Blackboard design
Breadcrumbs design
Calendar design
Checkboxes design
Checkboxes as switch buttons design
Circular image with border and shadow design
Cursor
Font Awesome pulled icons
Gallery picture frame with a price ribbon
Google pie chart
Google web fonts
Image caption
Last child and not last child element
Letter spacing
List items with a Font Awesome icon
Neon text
Neon text with a flickering effect
Notebook paper background
Radio buttons design
Radio buttons as stars
Remove the glow effect from an input field
Search bar with categories
Track (audio/video subtitles)
Web fonts
Whiteboard design