Customising Search Bar

Hi there,

I m using the code below to display a search bar on my home page.

Is there a way I can customise this - make it longer and wider?

<div style="width: 90%;">
    <div style ="text-align:center"><form action="/backlight/search/" method="GET"  class="search-form">
        <label><span data-lang="en" class="screen-reader-text">Search for:</span></label>
        <input type="text" id="q" name="q" value=""  placeholder="Enter your search. Use quotes around a phrase">

    <button type="submit" class="fa_pseudo">
        <span>Search Albums</span>


you can try targeting in custom css

can you include a link?

Yes thanks Rod,

Just on my homepage -

This is what I have at the moment.

<style>, p, {
    margin-left: auto;
    margin-right: auto;

You can use the browser inspector to find the the elements that control width.

Just a quick look shows me there are at least two:

you can try adding rules to your custom css using those two selectors, Set the max width the same for both.
I’ve not tested it completely, but I was able to change those widths in the browser inspector and was able to widen the search field.

Thanks Rod. I’ve never used the inspector. Is that in Developer Tools in the Chrome menu?

So are you saying I add max-width to widen the search box? What about making it a bit taller? Would that be changing a font or padding of some sort?


Yep, the inspector is in Developer Tools. It’s much easier to use if you can right click on an element and choose Inspect. But I think you’ve disabled right-click so you’ll need to dig down through the html.

You can try this in your custom css file (or add it to the styles on the page0:, input#q {
max-width: 600px;

You can change the height of the input field but you’d also probably want to change the button or it will look weird. And it will still be one line.

Ok - thanks Rod. I’ve just tried that and it works. Great. Yes I have enabled right-click again.

For the height is it just as simple as (although nothing changed for me):

max-height: 200px;

Also I can see that the button is button.fa_pseudo and is 36x36. How do I define this to be larger?

Appreciate the help.


it looks like button controls the width of the button
the form button selector uses line-height to control the height

Great. Have changed the button and the box now to look ok

Just need to actually change height of the text as a placeholder in the input box.

Have tried below but nothing changing. Can you see if I am missing something?

<input type="text" id="q" name="q" value=""  style="font-size: large;" placeholder="Enter your search. Use quotes around a phrase">

in the inspector, find the placeholder text. see if there’s any styling controlling it. look for font-size and line-height

Be sure to check to see what it looks like on a phone

Ok thanks, Rod.

Have found

<input type="text" id="q" name="q" value="" placeholder="Enter your search.">

is it looks like “q” or " placeholder is what I need to work around. Will see if I can make something work.


Just wanted to say thank you for these posts about putting a search box onto pages. I was able to use your example (with a couple of small changes) to get what I wanted for my own site.

Really helpful to have sample code.