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