This website uses cookies to personalize your experience. By using this website you agree to our cookie policy.

Reply To: Form setting field Design

#41496
Ernest MarcinkoErnest Marcinko
Keymaster

Hi!

Thank you for the details, it helps a lot!

1. Most of it is hard coded, but you can still use custom CSS to get the colors:

/* The Container */
.asp_select2-selection,
span[class*=asp_select2-selection],
.asp_select2-search__field,
.asp_select2-search__field::placeholder {
    background: red !important;
    color: white !important;
}

/* The selection */
.asp_s span.asp_select2-container--flat ul li.asp_select2-selection__choice,
.asp_sb span.asp_select2-container--flat ul li.asp_select2-selection__choice {
    color: white;
    background-color: #ff7272 !important;
    border: 1px solid #ff7272 !important;
}

/* Drop down general */
span.asp_select2-container--open .asp_select2-dropdown--below,
span.asp_select2-container--open .asp_select2-dropdown--above {
    background: #9c6a6a;
    color:#fff;
}

/* Drop down selected values */
span.asp_select2-container--flat .asp_select2-results__option[aria-selected=true] {
    background: #b34949;
    color: #fff;
}

/* Drop down hovered selection */
span.asp_select2-container--flat .asp_select2-results__option--highlighted[aria-selected] {
    background: #dc3737 !important;
    color: #fff;
}

2. You can change the button colors, margins, paddings etc.. under the frontend search settings panel: https://i.imgur.com/oqFbiII.png
For a boxy design you can set the border radiuses to 0, as well as increase the paddings for bigger buttons.