Archived topic
Want to display the search box same in this way
9 replies · Started by Rohith on June 20, 2021
1. I have used some of your code and added the search box in the header. Used some css also (.custom-search { float:right; }. But unfortunately, the search bar is not floating to the right side (added link in private message).
2. I want to look my search bar exactly like this, Pease help me in doing this.
https://ibb.co/ssDgHsf
Hi there,
try this CSS:
.custom-search {
background-color: green;
border-radius: 25px;
margin: 0 5px;
order: 10;
}
.custom-search input[type="search"],
.custom-search button {
border: 0;
outline: 0;
background-color: transparent;
color: #fff;
}
.custom-search input[type="search"]::placeholder {
color: #fff;
}The design and everything was upto the mark but the Search box still remains on the left side itself. I want to movie it to the right corner. And I also want to decrease the size of the box.
I updated the CSS above to move the search to the right of the navigation.
Okay but I want to reduce the size of the box
Add this CSS to reduce the width of the input field:
.custom-search input[type="search"] {
max-width: 100px;
}Thanks, It worked!
Glad to be of help
The Size of the text in search bar is increasing automatically when I increase the body text size. Could you give the css to decrease search text size only?
Try this:
.custom-search input[type="search"]::placeholder {
font-size: 10px;
}