Hi! Thank you.
I made the search bar rounded corners which worked – and then it’s height thinner, by applying this code – however the search icon is now out of place (it’s lower than the button), so I think I have done it wrong. Can you suggest a better code perhaps?
.is-search-form label input.is-search-input {
width: 100%;
height: 25px;
border-radius: 10px;
margin-top: -10px;
outline: 0;
}
input.is-search-input {
border-radius: 5px 0 0 5px !important;
}
button.is-search-submit span.is-search-icon,
button.is-search-submit {
border-radius: 0 5px 5px 0;
height: 25px;
margin-top: -5px;
}
Styling wise, I was hoping it would be possible to style it like this search bar
https://vilmairis.com/
With:
– a black border around the whole box.
– the search button not a seperate colour – the same white background and included in the same border as the search box, and the search icon being black.
– the word ‘SEARCH’ across as the placeholder in the box
-
This reply was modified 3 years, 10 months ago by ememmy.