Buy me a coffee

Beaver Builder – Search Widget Module CSS

Search Widget Module style is controlled by Theme Settings. If you want to edit the style, you will need to use CSS.

I wrote these CSS. You just need to copy, edit and paste them at

  • Appearance > Customize > Custom CSS (or Additional CSS)
  • or Beaver Tools > Layout CSS & JavaScript > CSS


CSS Code


Search Field


Lines 06 – 25

Search Button


Default Search Button will be hidden. You need to use display: block or inline-block to display it.

Lines 28 – 56

Center Search Button

Lines 59 – 61


Search Field & Search Button Inline


First you need to decrease the width of Search Field. Then use float: left;

Lines 64 – 67

Have suggestions? Please comment below 🙂 Thanks.

Leave a Comment

Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to:
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder