Developers
Authorization
API Resources
NL Interpreter
Search
Messenger
Search Box
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:beforepseudo-selector.
Note
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>
</form>
<div>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 |