Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/* CSS by BeaverHero.com */
/* Insert to Appearance > Customize > Additional CSS (Custom CSS) OR Layout CSS & JavaScript > CSS */
/* Detail: https://beaverhero.com/search-widget-module-css-bb */
/* 1. SEARCH FIELD */
.widget .search-field {
background-color: grey;
font-size: 25px;
font-family: Roboto, sans-serif;
text-transform: uppercase;
border-color: red;
border-width: 3px;
border-style: solid;
border-top-left-radius: 20px;
border-top-right-radius: 50px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 0;
}
.widget .search-field::placeholder {
color: #fff;
}
.widget .search-field:focus {
background-color: #fff;
border-color: #fff;
}
/* 2. SEARCH SUBMIT */
.widget input.search-submit {
display: block;
background-color: #B42208;
color: #fff;
font-weight: 400;
font-family: Monsterrat, sans-serif;
font-size: 20px;
border-color: white;
border-width: 2px;
border-style: dotted;
border-top-right-radius: 32px;
border-top-left-radius: 20px;
border-bottom-right-radius: 32px;
border-bottom-left-radius: 50px;
padding-top: 50px;
padding-bottom: 10px;
padding-left: 70px;
padding-right: 200px;
margin-top: 50px;
margin-bottom: 50px;
margin-left: 20px;
margin-right: 30px;
animation: all 0.25s;
}
.widget input.search-submit:hover {
background-color: #f8f8f8;
color: #222;
border-color: violet;
}
/* 3. CENTER SEARCH BUTTON */
.widget input.search-submit {
margin: 0 auto;
}
/* 4. Inline Search Field & Button */
.widget .search-field {
width: 70%;
float: left;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment