serach widget BB
Author:
Tuan Phan
Description:
Search Widget Module CSS
—
If you use Search Widget Module in Beaver Builder, you cannot edit font, color, background, border…because they is controlled by Theme Settings and Beaver has no settings to edit them.
You can use these following css to customize (color, border, padding, font,…) for the search widget module 
🙂
Just copy, edit, and paste to Custom CSS (or Tools > CSS & JavaScript in your page).
Link css:
Kind:
CSS, Beaver
CSS:
/* 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;
}