Archived topic
Search Placeholder PHP Snippet
20 replies · Started by Michael on January 28, 2020
Telling WordPress search (which isn't good in the first place) to do that would be difficult, I think.
I tried to find a plugin to do it, but I wasn't able to unfortunately.
No problem Tom. Thank you for trying.
No problem! Let me know if you find something :)
Will do for sure :)
For anyone who may have need of this... Here is my styling for the Google Custom Search. It took me waaaay longer than I thought to achieve it, so hopefully this can save others some pain. It's an !important fest but it's the only way it would take the styling:
.gsc-control-cse {
border-width: 0 !important;
padding: 0 !important;
}
form.gsc-search-box,table.gsc-search-box {
margin-bottom: 0 !important;
}
.gsc-search-box .gsc-input {
padding: 0 !important;
}
#gsc-iw-id1 {
box-shadow: none !important;
border-width: 0 !important;
height: auto !important;
padding: 0 !important;
}
#gs_tti50 {
padding: 0 !important;
}
#gsc-i-id1 {
background: none !important;
color: #666;
padding: 5px 0 0 10px !important;
text-indent: 0 !important;
width: 335px !important;
}
a.gsst_a {
margin: 0 !important;
padding: 0 !important;
transition: opacity 0.3s ease-in-out !important;
-moz-transition: opacity 0.3s ease-in-out !important;
-o-transition: opacity 0.3s ease-in-out !important;
-webkit-backface-visibility: hidden !important;
-webkit-transition: opacity 0.3s ease-in-out !important;
}
span#gs_cb50.gscb_a {
color: #539c22 !important;
margin-top: 7px !important;
padding: 0 !important;
}
.gsst_a:hover {
opacity: 0.7 !important;
}
table.gsc-search-box {
border-collapse: collapse !important;
border-spacing: 0 !important;
display: inline-block !important;
height: 33px !important;
margin: 0 !important;
padding: 0 !important;
width: 400px !important;
}
table.gsc-search-box td {
height: 33px !important;
margin: 0 !important;
padding: 0 !important;
vertical-align: middle !important;
}
table#gs_id50.gstl_50.gsc-input {
alignment-baseline: middle !important;
margin: 0 !important;
padding: 0 !important;
}
td.gsc-input {
display: inline-block !important;
height: 33px !important;
margin: 0 !important;
padding: 0 !important;
}
button.gsc-search-button {
border-width: 0 !important;
box-shadow: none !important;
box-sizing: content-box !important;
cursor: pointer;
height: 13px !important;
margin-top: 3px !important;
outline: none;
padding: 0 !important;
width: 13px !important;
}
.gsc-branding {
display: none !important;
}
.gsc-control-cse, #gsc-iw-id1 {
background-color: transparent !important;
}
#search-container {
align-items: center;
background-color: #fff;
border: 1px solid #d0d0d0;
border-radius: 5px;
display: flex;
height: 33px;
justify-content: flex-end;
margin-top: 25px;
padding: 3px;
width: 400px;
}
button.gsc-search-button {
background-color: #539c22 !important;
border-radius: 5px !important;
padding: 10px !important;
transition: opacity 0.3s ease-in-out !important;
-moz-transition: opacity 0.3s ease-in-out !important;
-o-transition: opacity 0.3s ease-in-out !important;
-webkit-backface-visibility: hidden !important;
-webkit-transition: opacity 0.3s ease-in-out !important;
}
button.gsc-search-button:hover {
cursor: pointer;
opacity: 0.7;
}
Glad you got it working - thanks for sharing your code! :)