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-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 {
.choices.is-flipped.is-open .choices__inner {
.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);
.has-accessible-features .choices.is-open.is-focused .choices__inner,
.has-accessible-features
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);
.choices[data-type*='select-multiple'].is-open .choices__inner {
.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 {
vertical-align: baseline;
.choices__input:focus {
outline: 0;
.choices.is-disabled .choices__input {
.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);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
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 {
.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 {
.choices.Not_Valid .choices__item {
.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-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);
.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);
.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;
padding: var(--space-none) var(--space-base);
.choices[dir='rtl'] .choices__list--dropdown .choices__item {
.choices__item--disabled {
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 {
.choices__list--dropdown .choices__item.choices__item--selectable.is-highlighted:after {
.choices__button {
text-indent: -9999px;
background-repeat: no-repeat;
background-position: center;
border: var(--border-size-none);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
.choices__button:focus {
.choices[data-type*='select-one'] .choices__button {
display: none;
width: 20px;
margin-top: -10px;
margin-right: var(--space-m);
right: 0;
.choices[data-type*='select-one'] .choices__button:hover {
opacity: 1;
.choices[data-type*='select-one'] .choices__button:focus {
-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);
left: 0;
.choices[data-type*='select-multiple'] .choices__button:after {
content: '\f00d';
font: normal normal normal 14px/1 FontAwesome;
font-family: 'FontAwesome';
text-indent: 0;
.choices[data-type*='select-multiple'] .choices__button:hover,
.choices[data-type*='select-multiple'] .choices__button:focus {
.choices[data-type*='select-multiple'] .choices__item.is-highlighted .choices__button:after {
.choices[data-type*='select-multiple'] .choices__button,
.choices[data-type*='text'] .choices__button {
width: 8px;
margin-top: var(--space-none);
margin-right: -4px;
margin-left: var(--space-s);
line-height: 1;
.choices[dir='rtl'][data-type*='select-multiple'] .choices__button,
.choices[dir='rtl'][data-type*='text'] .choices__button {
margin-right: var(--space-s);
.choices[data-type*='text'] .choices__button:hover,
.choices[data-type*='text'] .choices__button:focus {
.choices__list {
margin: var(--space-none);
list-style: none;
.choices__list--single {
height: 100%;
.choices[dir='rtl'] .choices__list--single {
.choices__list--multiple {
display: inline;
.choices__list--dropdown {
top: 100%;
z-index: 1;
.is-flipped .choices__list--dropdown {
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;
.choices__list--dropdown .choices__list {
max-height: 300px;
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 {
.choices__heading {
padding: var(--space-s);
font-size: var(--font-size-s);
color: var(--color-neutral-5);
border-bottom: var(--border-size-s) solid var(--color-neutral-0);
.choices__placeholder {
.choices[data-type*='select-one'] {
.choices[data-type*='select-one']:after {
content: '\f107';
font: normal normal normal 24px/1 FontAwesome;
-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;
top: 8px;
right: 16px;
.choices[data-type*='select-one']:after.is-disabled {
.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 {
left: 16px;
.has-accessible-features .choices[data-type*='select-one'] {
.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 {
.choices[data-type*='select-multiple'] .search--wrapper input:focus {
-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 {
.choices .search--wrapper input {
height: var(--input-height);
.choices .search--wrapper:before {
content: '\f002';
.has-accessible-features .choices .search--wrapper input:focus {
.choices.is-disabled {
@Dorine Boudry @José Gonçalves @Marcio Carvalho Thanks a lot ! Best Regards.