What does this CSS snippet do?
This CSS snippet styles a search form user interface component within a container that includes a dropdown, a text input, and a search button.
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 as circular buttons
Checkboxes as toggle switches
Cursor properties
Circular image with a shadow effect
Font Awesome pulled icons
Gallery picture frame with a price ribbon
Google pie chart
Google web fonts
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 as circular buttons
Radio buttons as rating stars
Remove the glow effect from an input field
Search bar with categories
Track (audio/video subtitles)
Web fonts
Whiteboard design