Search Box Styling

[Anonymous 103919]

Anonymous 103919

November 9, 2017 at 7:43 am

Hi,

I have added a search box to the top bar, which I am trying to stylise.
I found this bit of CSS from another entry on the forum which has almost given the box the look I am after:

}
#topbar-search .form-search .search-query {border: 3px solid #a51202;border-radius: 1000px !important;color:#a51202;width:100%; background:#fffafa;}
#topbar-search .form-search .search-icon {
color:white;
background:#717171;
right: 0;
left: auto;
width: auto;
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
}
#topbar-search .form-search .search-icon:after {
content:””;
padding-left:5px;
padding-right: 5px;
font-weight:800;
font-family: “Roboto condensed”;
}
#topbar-search .form-search {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
max-width:400px;
}
#topbar-search .form-search ::-webkit-input-placeholder {
color: #555;
}
#topbar-search .form-search ::-moz-placeholder {
color: #555;
}
#topbar-search .form-search :-ms-input-placeholder {
color: #555;
}

However, when you type in the box, the text does not show. I would also like the actual search box to have a grey border.

Can you help please? I would post a link to the site, but its on a staging environment at the moment.

Thanks,
Paul