[Support request] Want to display the search box same in this way

[Rohith]

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

[David]

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;
}

[Rohith]

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.

[David]

I updated the CSS above to move the search to the right of the navigation.

[Rohith]

Okay but I want to reduce the size of the box

[David]

Add this CSS to reduce the width of the input field:

.custom-search input[type="search"] {
    max-width: 100px;
}

[Rohith]

Thanks, It worked!

[David]

Glad to be of help

[Rohith]

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?

[Leo]

Try this:

.custom-search input[type="search"]::placeholder {
    font-size: 10px;
}

[Author]

Posts