Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
GravityView search bar styles as seen on the GravityView blog
/* Container */
.gv-search-horizontal {
box-shadow: 0px 0px 5px 2px #b3b3b3;
padding:20px;
border-radius:17px;
}
/* search bar */
.gv-search-box input[type=search] {
border-radius: 10px;
height: 50px;
width: 100%;
padding: 5px 10px 5px 10px;
background-color: #fff;
border: 5px solid #55aef6;
}
.gv-search-box input[type=text]:focus {
border-color:#0d8bf2;
box-shadow: 2px 2px 5px 2px #bfbfbf;
}
/* labels */
.gv-search-box label {
font-size:20px;
font-family:'Montserrat',sans serrif;
}
/* search button */
.gv-search-box .gv-search-button {
background-color: #55aef6;
border: 2px solid #55aef6;
border-radius:10px;
color: #ffffff;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 18px !important;
font-family:'Montserrat',sans serrif;
font-weight:500;
}
.gv-search-box .gv-search-button:hover {
background-color: #0d8bf2;
border: 2px solid #0d8bf2;
cursor:pointer;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment