Dropdown Search CSS

Hello,

Please, it is possible to custom the "dropdown search" widget ?

If yes, can you give me the css class to modify ?


Thanks

Regards,

Julien

Hi Julien,

you can make a test screen with such a widget on it, test in chrome, and with inspect you can see all the classes that are applicable.

good luck,

Dorine

You mean the combo box web?

You can check the class in the widget, in this case is .select

Hello @Julien Garcia,

/*Interaction - DropdownSearch*/

You can find this on the OutSystems UI and then you need to change using the classes you see you want to change the CSS. You can use the way @Dorine Boudry told you, use the Dev tools and you can change the CSS on the browser, be careful, every time you refresh all those changes are deleted. To not be deleted you can copy all the CSS of dropdown search into this extension https://chrome.google.com/webstore/detail/css-js-injector/ and you can customize your dropdown.

Here you have the css, i think its not with the css of the OutSystems UI but you can see all the parent classes and their properties.

.choices {

    min-width: 150px;

    margin-bottom: var(--space-base);

    position: relative;

}

.choices:focus {

    outline: none;

}

.choices:last-child {

    margin-bottom: var(--space-none);

}

.choices__inner {

    display: inline-block;

    width: 100%;

    height: 40px;

    padding-left: var(--space-base);

    line-height: -webkit-calc(var(--font-size-base) * 2);

    line-height: calc(var(--font-size-base) * 2);

    vertical-align: top;

    color: var(--color-neutral-3);

    background-color: var(--color-neutral-0);

    border: var(--border-size-s) solid var(--color-neutral-5);

    border-radius: var(--border-radius-soft);

    -webkit-transition: all 180ms linear;

    -o-transition: all 180ms linear;

    transition: all 180ms linear;

}

.choices__inner:hover {

    border-color: var(--color-neutral-6);

}

.tablet .choices__inner,

.phone .choices__inner {

    height: 48px;

    font-size: var(--font-size-base);

}

.choices.is-open .choices__inner {

    color: var(--color-neutral-1);

    border-color: var(--color-primary);

    border-radius: var(--border-radius-soft);

    border-radius: var(--border-radius-none);

}

.choices.is-disabled .choices__inner {

    background-color: var(--color-neutral-2);

    cursor: not-allowed;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    border: var(--border-size-s) solid var(--color-neutral-4);

}

.choices.is-focused .choices__inner {

    color: var(--color-neutral-1);

    border-color: var(--color-primary);

    border-radius: var(--border-radius-soft);

}

.choices.is-flipped.is-open .choices__inner {

    border-radius: var(--border-radius-none);

}

.choices.is-open.is-focused .choices__inner,

.choices[data-type='select-multiple'].is-open.is-focused .choices__inner {

    border: var(--border-size-s) solid var(--color-primary);

    border-radius: var(--border-radius-soft);

}

.has-accessible-features .choices.is-open.is-focused .choices__inner,

.has-accessible-features

.choices[data-type='select-multiple'].is-open.is-focused .choices__inner {

    border-color: var(--color-focus-inner);

}

.has-accessible-features .choices[data-type='select-multiple'].is-open.is-focused .choices__inner {

    -webkit-box-shadow: 0 0 0 3px var(--color-focus-outer);

    box-shadow: 0 0 0 3px var(--color-focus-outer);

}

.choices.Not_Valid .choices__inner {

    border: var(--border-size-s) solid var(--color-error);

}

.choices[data-type*='select-one'] .choices__inner .choices__inner {

    padding-bottom: var(--space-none);

}

.choices[data-type*='select-multiple'] .choices__inner {

    height: auto;

    padding: var(--space-none);

    border-radius: var(--border-radius-soft);

}

.choices[data-type*='select-multiple'].is-open .choices__inner {

    border: var(--border-size-s) solid var(--color-neutral-5);

}

.choices[data-type*='select-multiple'] .choices__inner,

.choices[data-type*='text'] .choices__inner {

    cursor: text;

}

.choices__inner select {

    width: 1px;

    pointer-events: none;

    opacity: 0;

    position: absolute;

    z-index: -10;

}

.has-accessible-features .choices__inner {

    border-color: var(--color-neutral-7);

}

.has-accessible-features .choices__inner:hover {

    border-color: var(--color-neutral-8);

}

.choices__input {

    display: inline-block;

    width: 100%;

    vertical-align: baseline;

    background-color: var(--color-neutral-0);

    border: var(--border-size-s) solid var(--color-neutral-5);

    border-radius: var(--border-radius-soft);

}

.choices__input:focus {

    outline: 0;

}

.choices.is-disabled .choices__input {

    background-color: var(--color-neutral-0);

    cursor: not-allowed;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

}

.choices.is-disabled[data-type='select-multiple'] .choices__input {

    background-color: transparent;

}

.choices[dir='rtl'] .choices__input {

    padding-right: 2px;

    padding-left: var(--space-none);

}

.choices__item {

    cursor: default;

}

.choices__item--selectable {

    cursor: pointer;

}

.choices.is-disabled[data-type='select-multiple'] .choices__item--selectable {

    color: var(--color-neutral-7);

}

@media (min-width: 640px) {

    .choices__list--dropdown .choices__item--selectable:after {

        content: attr(data-select-text);

        font-size: var(--font-size-xs);

        opacity: 0;

        -webkit-transform: translateY(-50%);

        -ms-transform: translateY(-50%);

        transform: translateY(-50%);

        position: absolute;

        top: 50%;

        right: 10px;

    }

    .choices[dir='rtl'] .choices__list--dropdown .choices__item--selectable {

        padding-right: var(--space-s);

        text-align: right;

    }

    .choices[dir='rtl'] .choices__list--dropdown .choices__item--selectable:after {

        right: auto;

        left: 10px;

    }

}

.choices.is-disabled .choices__item {

    cursor: not-allowed;

}

.choices.is-disabled .choices__item.choices__item--selectable {

    color: var(--color-neutral-6);

}

.choices[dir='rtl'].is-disabled .choices__item {

    background-position: center left 16px;

}

.choices.is-disabled .choices__list--single .choices__item {

    color: var(--color-neutral-6);

}

.choices.Not_Valid .choices__item {

    border: var(--border-size-s) solid var(--color-error);

}

.choices.is-disabled .choices__list--multiple .choices__item {

    display: -webkit-inline-box;

    display: -webkit-inline-flex;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    height: 32px;

    margin-top: var(--space-xs);

    margin-left: var(--space-xs);

    padding: var(--space-xs) var(--space-s);

    vertical-align: middle;

    font-size: var(--font-size-xs);

    font-weight: var(--font-semi-bold);

    color: var(--color-neutral-9);

    word-break: break-all;

    background-color: var(--color-neutral-3);

    border: var(--border-size-s) solid var(--color-neutral-3);

    border-radius: var(--border-radius-soft);

}

.choices.is-disabled .choices__list--multiple .choices__item[data-deletable] {

    padding-right: var(--space-xs);

}

.choices.is-disabled .choices__list--multiple .choices__item.is-highlighted {

    color: var(--color-neutral-0);

    background-color: var(--color-primary);

    border: var(--border-size-s) solid var(--color-primary);

}

.choices.is-disabled .choices.is-disabled .choices__list--multiple .choices__item {

    background-color: var(--color-neutral-6);

    border: var(--border-size-s) solid var(--color-neutral-7);

}

.choices[dir='rtl'] .choices.is-disabled .choices__list--multiple .choices__item {

    margin-right: var(--space-xs);

    margin-left: var(--space-none);

}

.choices__list--dropdown .choices__item {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    height: 40px;

    padding: var(--space-none) var(--space-base);

    position: relative;

}

.choices[dir='rtl'] .choices__list--dropdown .choices__item {

    text-align: right;

}

.choices__item--disabled {

    cursor: not-allowed;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    opacity: .5;

}

.choices__list--single .choices__item {

    width: 99%;

    padding-right: var(--space-base);

    color: var(--color-neutral-10);

    white-space: nowrap;

    -o-text-overflow: ellipsis;

    text-overflow: ellipsis;

    overflow: hidden;

}

.choices__list--dropdown .choices__item.choices__item--selectable.is-highlighted {

    background-color: var(--color-neutral-2);

}

.choices__list--dropdown .choices__item.choices__item--selectable.is-highlighted:after {

    opacity: .5;

}

.choices__button {

    text-indent: -9999px;

    background-color: transparent;

    background-repeat: no-repeat;

    background-position: center;

    cursor: pointer;

    border: var(--border-size-none);

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

}

.choices__button:focus {

    outline: none;

}

.choices[data-type*='select-one'] .choices__button {

    display: none;

    width: 20px;

    height: auto;

    margin-top: -10px;

    margin-right: var(--space-m);

    padding: var(--space-none);

    position: absolute;

    top: 50%;

    right: 0;

}

.choices[data-type*='select-one'] .choices__button:hover {

    opacity: 1;

}

.choices[data-type*='select-one'] .choices__button:focus {

    opacity: 1;

    -webkit-box-shadow: 0 0 0 2px var(--shadow-xs);

    box-shadow: 0 0 0 2px var(--shadow-xs);

}

.choices[data-type*='select-one'][dir='rtl'] .choices__button {

    margin-right: var(--space-none);

    margin-left: var(--space-m);

    right: auto;

    left: 0;

}

.choices[data-type*='select-multiple'] .choices__button:after {

    content: '\f00d';

    font: normal normal normal 14px/1 FontAwesome;

    font-family: 'FontAwesome';

    color: var(--color-neutral-7);

    text-indent: 0;

    -webkit-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    transform: translateY(-50%);

    position: absolute;

    top: 50%;

    left: 0;

}

.choices[data-type*='select-multiple'] .choices__button:hover,

.choices[data-type*='select-multiple'] .choices__button:focus {

    opacity: 1;

}

.choices[data-type*='select-multiple'] .choices__item.is-highlighted .choices__button:after {

    color: var(--color-neutral-0);

}

.choices[data-type*='select-multiple'] .choices__button,

.choices[data-type*='text'] .choices__button {

    display: inline-block;

    width: 8px;

    margin-top: var(--space-none);

    margin-right: -4px;

    margin-bottom: var(--space-none);

    margin-left: var(--space-s);

    padding-left: var(--space-base);

    line-height: 1;

    border: var(--border-size-none);

    position: relative;

}

.choices[dir='rtl'][data-type*='select-multiple'] .choices__button,

.choices[dir='rtl'][data-type*='text'] .choices__button {

    margin-right: var(--space-s);

    margin-left: var(--space-none);

    padding-left: var(--space-none);

}

.choices[data-type*='text'] .choices__button:hover,

.choices[data-type*='text'] .choices__button:focus {

    opacity: 1;

}

.choices__list {

    margin: var(--space-none);

    padding-left: var(--space-none);

    list-style: none;

}

.choices__list--single {

    display: -webkit-inline-box;

    display: -webkit-inline-flex;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    width: 100%;

    height: 100%;

    padding-right: var(--space-base);

}

.choices[dir='rtl'] .choices__list--single {

    padding-right: var(--space-xs);

    padding-left: var(--space-base);

}

.choices__list--multiple {

    display: inline;

}

.choices__list--dropdown {

    display: none;

    width: 100%;

    word-break: break-all;

    background-color: var(--color-neutral-0);

    border: var(--border-size-s) solid var(--color-neutral-5);

    border-radius: var(--border-radius-soft);

    position: absolute;

    top: 100%;

    z-index: 1;

    overflow: hidden;

}

.is-flipped .choices__list--dropdown {

    margin-top: var(--space-none);

    margin-bottom: -1px;

    border-radius: var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none);

    top: auto;

    bottom: 100%;

}

.choices__list--dropdown.is-active {

    display: block;

    margin-top: var(--space-xs);

}

.choices__list--dropdown .choices__list {

    max-height: 300px;

    position: relative;

    overflow: auto;

    -webkit-overflow-scrolling: touch;

    will-change: scroll-position;

}

.choices__list::-webkit-scrollbar {

    width: 5px;

}

.choices__list::-webkit-scrollbar-track {

    background: var(--color-neutral-4);

}

.choices__list::-webkit-scrollbar-thumb {

    background-color: var(--color-neutral-6);

}

.choices__heading {

    padding: var(--space-s);

    font-size: var(--font-size-s);

    font-weight: var(--font-semi-bold);

    color: var(--color-neutral-5);

    border-bottom: var(--border-size-s) solid var(--color-neutral-0);

}

.choices__placeholder {

    opacity: .5;

}

.choices[data-type*='select-one'] {

    cursor: pointer;

}

.choices[data-type*='select-one']:after {

    content: '\f107';

    font: normal normal normal 24px/1 FontAwesome;

    font-family: 'FontAwesome';

    color: var(--color-neutral-7);

    -webkit-transform-origin: center;

    -ms-transform-origin: center;

    transform-origin: center;

    -webkit-transition: all 300ms ease;

    -o-transition: all 300ms ease;

    transition: all 300ms ease;

    position: absolute;

    top: 8px;

    right: 16px;

}

.choices[data-type*='select-one']:after.is-disabled {

    color: var(--color-neutral-5);

}

.tablet .choices[data-type*='select-one']:after,

.phone .choices[data-type*='select-one']:after {

    top: 14px;

}

.choices[data-type*='select-one'].is-open:after {

    color: var(--color-primary);

    -webkit-transform: rotate(180deg);

    -ms-transform: rotate(180deg);

    transform: rotate(180deg);

}

.choices[data-type*='select-one'] .search--wrapper input:not(.btn):not(.checkbox):not(.radio-button),

.choices[data-type*='select-one'] .search--wrapper .input {

    max-width: 100%;

    padding-left: var(--space-l);

}

.choices[data-type*='select-one'][dir='rtl']:after {

    right: auto;

    left: 16px;

}

.has-accessible-features .choices[data-type*='select-one'] {

    border-radius: var(--border-radius-soft);

}

.choices[data-type*='select-multiple'] .search--wrapper {

    width: auto;

    padding: var(--space-none) var(--space-xs) 0 0;

}

.choices[data-type*='select-multiple'] .search--wrapper:before {

    left: var(--space-base);

}

.choices[data-type*='select-multiple'] .search--wrapper input {

    border: var(--border-size-none);

}

.choices[data-type*='select-multiple'] .search--wrapper input:focus {

    border: var(--border-size-none);

    -webkit-box-shadow: var(--shadow-none);

    box-shadow: var(--shadow-none);

}

.choices[data-type*='select-multiple'] .search--wrapper input:not(.btn):not(.checkbox):not(.radio-button),

.choices[data-type*='select-multiple'] .search--wrapper .input {

    width: auto !important;

    padding-left: var(--space-xl);

}

.choices[dir='rtl'] .search--wrapper input:not(.btn):not(.checkbox):not(.radio-button) {

    padding-right: var(--space-xl);

}

.choices[dir='rtl'] .search--wrapper:before {

    right: var(--space-base);

}

.choices .search--wrapper {

    padding: var(--space-s);

    position: relative;

}

.choices .search--wrapper input {

    height: var(--input-height);

    padding: var(--space-none) var(--space-base);

    -webkit-transition: all 180ms linear;

    -o-transition: all 180ms linear;

    transition: all 180ms linear;

}

.choices .search--wrapper:before {

    content: '\f002';

    font: normal normal normal 14px/1 FontAwesome;

    font-family: 'FontAwesome';

    color: var(--color-neutral-6);

    -webkit-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    transform: translateY(-50%);

    position: absolute;

    top: 50%;

    left: var(--space-base);

}

.has-accessible-features .choices .search--wrapper input:focus {

    border-color: var(--color-focus-inner);

}

.choices.is-disabled {

    pointer-events: none;

}


@Dorine Boudry  @José Gonçalves @Marcio Carvalho Thanks a lot ! Best Regards.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.