- This topic has 9 replies, 3 voices, and was last updated 4 years, 9 months ago by
.
-
Posts
-
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/ssDgHsfCustomer Support
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?
Customer Support
Try this:
.custom-search input[type="search"]::placeholder { font-size: 10px; }
- You must be logged in to reply to this topic.
