Shorten Google Custom Search Box

[lancegoodie]

On my site, KingK9s.com, I have a custom Google search box. There is on that I put on the front page of my site. The problem is, the search box is "too" wide for my liking. Is there a way to "shorten" the search box to a length of my choosing?

Thank you for any help.

http://www.kingk9s.com/

[Christoph]

Hi,
around line 357 of the style.css you'll find

input, select, textarea {
    background-color: #FFF;
    border: 1px solid #DDD;
    border-radius: 0px;
    color: #777;
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
    padding: 20px;
    width: 100%;
}

Change the width to the percentage that looks good to you.
If you wanted to change the height of the box, you can adjust line-height.

Caution, those changes will affect all input fields.

To only affect the search box, you could try to add something like

.cse-search-box .input {
width: 50%;
line-height: 2;
}

to the style.css .

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Author]

Posts