Search Box

This component is a .inbenta-search-box form. Inside has the form element with the class .inbenta-search-box__form. It has two elements:

  • an input field: .form__input.
  • a button: .form__button. This element can contain either text or an icon. The icon will be specified within the :before pseudo-selector.

Depending on the size of the button, the input field will dynamically adjust its width accordingly.

Component image


HTML structure

<div class="inbenta-search-box">
<form class="inbenta-search-box__form">
   <input class="inbenta-search-input form__input">
   <button class="form__button inbenta-search-button inbenta-search-icon">Search</button>

CSS editable properties

Class Css
.inbenta-search-box margin, padding, background, background, box-shadow
.inbenta-search-box__form display, position,width, border, box-shadow, transition
.inbenta-search-box__form .form__input height, margin, border, background, font, color, pseudo-class(focus, placeholder : border)
.inbenta-search-box__form .form__button height,width, border, background, font, color, transition pseudo-class(hover, focus : background, transition)
.inbenta-search-box__form .form__button:before content, font, color