Hi all,

I'm struggling to overwrite the CSS on my dropdowns. Currently, it is like this:

I wanna change the highlight color when hovering over one single item. Any suggestions?

I'm working on a Reactive web app.

Hi Tamirys Barina

You can add the following css to your Theme/Page

[data-dropdown] > div.dropdown-display:hover, [data-dropdown] > select.dropdown-display:hover {

  background-color: red;

}

The result would be like this:

Please let me know if you need more help :)

José Pedro Proença wrote:

Hi Tamirys Barina

You can add the following css to your Theme/Page

[data-dropdown] > div.dropdown-display:hover, [data-dropdown] > select.dropdown-display:hover {

  background-color: red;

}

The result would be like this:

Please let me know if you need more help :)

I have tried that before but it is not what I want to achieve. It is like this...

but what I wanna change is the highlight color, where it is my arrow pointing to.

Hello.


Try to add this CSS to your page.


.dropdown .dropdown-content .dropdown-content-list a:hover {
    background-color: blue;
}


Edit: For reference: https://success.outsystems.com/Documentation/11/Reference/OutSystems_Language/Traditional_Web/Web_Interfaces/Patterns/Dropdown_Reference

Tiago Oliveira wrote:

Hello.


Try to add this CSS to your page.


.dropdown .dropdown-content .dropdown-content-list a:hover {
    background-color: blue;
}


Edit: For reference: https://success.outsystems.com/Documentation/11/Reference/OutSystems_Language/Traditional_Web/Web_Interfaces/Patterns/Dropdown_Reference

Not yet :(

Tamirys Barina wrote:

José Pedro Proença wrote:

Hi Tamirys Barina

You can add the following css to your Theme/Page

[data-dropdown] > div.dropdown-display:hover, [data-dropdown] > select.dropdown-display:hover {

  background-color: red;

}

The result would be like this:

Please let me know if you need more help :)

I have tried that before but it is not what I want to achieve. It is like this...

but what I wanna change is this blue color hover, where it is my arrow pointing to.

That color is controled by the browser, not CSS, so solutions are browser specific. So you don't have many options, please find more here: https://stackoverflow.com/a/19388345/5919274

You would need to build a custom dropdown just for your use case.


Can you provide us with more information or an oml example? Or maybe some screenshots of what you have and what you want to achieve.

Is this closer to what you want to achieve?

[data-dropdown] div.dropdown-popup-row-selected:hover, [data-dropdown] div.dropdown-popup-row:hover {
    background-color: #00BFFF;
    border: 2px solid black;
    color: white;
}


(This is based on what José Pedro Proença answered previously.)

Tiago Oliveira wrote:

Is this closer to what you want to achieve?

[data-dropdown] div.dropdown-popup-row-selected:hover, [data-dropdown] div.dropdown-popup-row:hover {
    background-color: #00BFFF;
    border: 2px solid black;
    color: white;
}


(This is based on what José Pedro Proença answered previously.)

I don't think I will be able to achieve this with CSS, I tried everything I could, but thanks 


Ok. But feel free to provide more information on what you want to achieve and we will be here to help.

Tiago Oliveira wrote:

Ok. But feel free to provide more information on what you want to achieve and we will be here to help.


I just wanna change the highlight color of my dropdowns. I wanna put a different blue and a different border-color and border-width. That's it!

Tamirys Barina wrote:

Tiago Oliveira wrote:

Is this closer to what you want to achieve?

[data-dropdown] div.dropdown-popup-row-selected:hover, [data-dropdown] div.dropdown-popup-row:hover {
    background-color: #00BFFF;
    border: 2px solid black;
    color: white;
}


(This is based on what José Pedro Proença answered previously.)

I don't think I will be able to achieve this with CSS, I tried everything I could, but thanks 


Yes :/ has I mentioned that color is controled by the browser, not CSS. For Firefox some of the solutions pasted here would work for example, but not for other browsers.

Todo this you will need to use a pseudo element, so, something that looks and behaves like a dropdown, but that is not a native dropdown. 

I use something like this when I need that type of behaviour:


Style class for the Dropdown container:

"dropdown is--hidden" + If(ExtendedClass <> "", " " + ExtendedClass, "")

Style class for the DropdownHeader container:

"dropdown-header select"

Style class for the DropdownHeaderContent_placeholder Placeholder:

"dropdown-header-text"

Style class for the dropdown-icon container:

"dropdown-icon"

Style class for the dropdown-content container:

"dropdown-content"

Style class for the DropdownContentList_placeholder Placeholder:

"dropdown-content-list"


You then need this CSS

SyntaxEditor Code Snippet

/* $4.2.4 - Patterns - Controls - Dropdown */
.dropdown,
.dropdown .dropdown-content .dropdown-content-list,
.dropdown .dropdown-header {
    width: 100%;
}

.dropdown .dropdown-header {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    background-image: none;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
       -ms-flex-pack: justify;
     justify-content: space-between;
}

.is--visible .dropdown-header.select {
    border: var(--border-size-s) solid var(--color-primary);
}

.dropdown .dropdown-content {
    position: absolute;
    display: block;
    z-index: 50;
}

.dropdown.is--visible .dropdown-icon {
    color: var(--color-primary);
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}

.dropdown .dropdown-icon .fa {
    font-size: 24px;
    width: auto;
}

.dropdown .dropdown-icon {
    color: var(--color-neutral-7);
    -webkit-transition: all 300ms ease-in-out;
            transition: all 300ms ease-in-out;
}

.dropdown .dropdown-content .dropdown-content-list {
    background: var(--color-neutral-0);
    border-radius: var(--border-radius-soft);
    border: var(--border-size-s) solid var(--color-neutral-4);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
    margin-top: var(--space-xs);
    max-height: 300px;
    overflow-y: auto;
    padding: var(--space-s) var(--space-none);
    /*position: absolute;*/
    -webkit-transition: opacity 180ms ease;
            transition: opacity 180ms ease;
            
    -servicestudio-position: relative;
    -servicestudio-opacity: 1;
}

.dropdown.is--visible .dropdown-content .dropdown-content-list {
    opacity: 1;
}

.dropdown.is--hidden .dropdown-content .dropdown-content-list {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: none;
    -servicestudio-opacity: 1;
}

.dropdown.is--visible .dropdown-content-list {
    opacity: 1;
    visibility: visible;
}

.dropdown.is--hidden .dropdown-content-list {
    opacity: 0;
    pointer-events: none;
}

.dropdown .dropdown-content .dropdown-content-list a {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    color: var(--color-neutral-9);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 40px;
    padding: var(--space-none) var(--space-base);
    margin: 0;
}

.dropdown .dropdown-content .dropdown-content-list a:hover {
    background-color: var(--color-neutral-2);
}

and JS from OutsystemsUIweb.

/* Closes the dropdown when the user clicks outside of dropdown */
var Dropdown = function() {
    var body;
    var dropdown;
    var dropdownButton;
    var dropDownListItems;
    
    var start = function(widgetId) {
        // Gets objects
        body = document.querySelector('body');
        dropdown = document.getElementById(widgetId);
        dropdownButton = dropdown.querySelector('.dropdown-header');
        dropdownList = dropdown.querySelector('.dropdown-content-list');

        // change the tabindex values to -1
        dropDownListItems = dropdown.querySelectorAll('.dropdown-content-list > *');
        dropDownListItems = [].slice.call(dropDownListItems);
        setTabIndexValue('-1');

        if(dropdownButton.querySelector("input")) {
            dropdownButton.querySelector("input").setAttribute('tabindex', '-1');
        }
        
        // Add event listeners
        body.addEventListener('click', screenClickHandler);
        dropdownButton.addEventListener('keydown', onDropdownKeypress);
        dropdownButton.addEventListener('click', onDropdownClick);
    };
    
    var isChildrenOf = function(element, parent) {
        // Checks if element is children of parent
        if(element && element.parentElement && element.parentElement === parent) {
            return element.parentElement;
        } else if( !element || element && element.parentElement && element.parentElement.classList.contains('page')) {
            return false;
        } else {
            return isChildrenOf(element.parentElement, parent);
        }
    };

    var setTabIndexValue = function (value) {
        dropDownListItems.forEach(function(item) {
            item.setAttribute('tabindex', value);
        });
    }
    
    var onDropdownClick = function() {
        toggleDropdown();
    };
    
    var onDropdownKeypress = function(e) {
        e.stopPropagation();
        
        if (e.keyCode == "13") {
            toggleDropdown();
        } else if(e.keyCode == "27" && dropdown.classList.contains('is--visible')) {
            dropdown.classList.remove('is--visible');
            dropdown.classList.add('is--hidden');
            dropdownButton.setAttribute('aria-expanded','false');
            dropdownList.setAttribute('aria-hidden','true');

            setTabIndexValue('-1');
        } else if(e.keyCode == "32" && dropdown.classList.contains('is--hidden')) {
            dropdown.classList.remove('is--hidden');
            dropdown.classList.add('is--visible');
            dropdownButton.setAttribute('aria-expanded','true');
            dropdownList.setAttribute('aria-hidden','false');

            setTabIndexValue('0');
        }
    };
    
    var toggleDropdown = function() {
        if(dropdown.classList.contains('is--visible')){
            dropdown.classList.remove('is--visible');
            dropdown.classList.add('is--hidden');
            dropdownButton.setAttribute('aria-expanded','false');
            dropdownList.setAttribute('aria-hidden','true');

            setTabIndexValue('-1');
        } else {
            dropdown.classList.remove('is--hidden');
            dropdown.classList.add('is--visible');
            dropdownButton.setAttribute('aria-expanded','true');
            dropdownList.setAttribute('aria-hidden','false');

            setTabIndexValue('0');
        }
    }
    
    var screenClickHandler = function(e) {
        // Closes dropdown if target doesn't have the current dropdown element as a parent
        if(dropdown.classList.contains('is--visible') && !isChildrenOf(e.target, dropdown)) {
            onDropdownClick();
        }
    };
    
    return {
        init: function(widgetId) {
            start(widgetId);        
        }
    };
};


Do you think it would be usefill for you if I made this a Forge component?

José Pedro Proença wrote:

Tamirys Barina wrote:

Tiago Oliveira wrote:

Is this closer to what you want to achieve?

[data-dropdown] div.dropdown-popup-row-selected:hover, [data-dropdown] div.dropdown-popup-row:hover {
    background-color: #00BFFF;
    border: 2px solid black;
    color: white;
}


(This is based on what José Pedro Proença answered previously.)

I don't think I will be able to achieve this with CSS, I tried everything I could, but thanks 


Yes :/ has I mentioned that color is controled by the browser, not CSS. For Firefox some of the solutions pasted here would work for example, but not for other browsers.

Todo this you will need to use a pseudo element, so, something that looks and behaves like a dropdown, but that is not a native dropdown. 

I use something like this when I need that type of behaviour:


Style class for the Dropdown container:

"dropdown is--hidden" + If(ExtendedClass <> "", " " + ExtendedClass, "")

Style class for the DropdownHeader container:

"dropdown-header select"

Style class for the DropdownHeaderContent_placeholder Placeholder:

"dropdown-header-text"

Style class for the dropdown-icon container:

"dropdown-icon"

Style class for the dropdown-content container:

"dropdown-content"

Style class for the DropdownContentList_placeholder Placeholder:

"dropdown-content-list"


You then need this CSS

SyntaxEditor Code Snippet

/* $4.2.4 - Patterns - Controls - Dropdown */
.dropdown,
.dropdown .dropdown-content .dropdown-content-list,
.dropdown .dropdown-header {
    width: 100%;
}

.dropdown .dropdown-header {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    background-image: none;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
       -ms-flex-pack: justify;
     justify-content: space-between;
}

.is--visible .dropdown-header.select {
    border: var(--border-size-s) solid var(--color-primary);
}

.dropdown .dropdown-content {
    position: absolute;
    display: block;
    z-index: 50;
}

.dropdown.is--visible .dropdown-icon {
    color: var(--color-primary);
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}

.dropdown .dropdown-icon .fa {
    font-size: 24px;
    width: auto;
}

.dropdown .dropdown-icon {
    color: var(--color-neutral-7);
    -webkit-transition: all 300ms ease-in-out;
            transition: all 300ms ease-in-out;
}

.dropdown .dropdown-content .dropdown-content-list {
    background: var(--color-neutral-0);
    border-radius: var(--border-radius-soft);
    border: var(--border-size-s) solid var(--color-neutral-4);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
    margin-top: var(--space-xs);
    max-height: 300px;
    overflow-y: auto;
    padding: var(--space-s) var(--space-none);
    /*position: absolute;*/
    -webkit-transition: opacity 180ms ease;
            transition: opacity 180ms ease;
            
    -servicestudio-position: relative;
    -servicestudio-opacity: 1;
}

.dropdown.is--visible .dropdown-content .dropdown-content-list {
    opacity: 1;
}

.dropdown.is--hidden .dropdown-content .dropdown-content-list {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: none;
    -servicestudio-opacity: 1;
}

.dropdown.is--visible .dropdown-content-list {
    opacity: 1;
    visibility: visible;
}

.dropdown.is--hidden .dropdown-content-list {
    opacity: 0;
    pointer-events: none;
}

.dropdown .dropdown-content .dropdown-content-list a {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    color: var(--color-neutral-9);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 40px;
    padding: var(--space-none) var(--space-base);
    margin: 0;
}

.dropdown .dropdown-content .dropdown-content-list a:hover {
    background-color: var(--color-neutral-2);
}

and JS from OutsystemsUIweb.

/* Closes the dropdown when the user clicks outside of dropdown */
var Dropdown = function() {
    var body;
    var dropdown;
    var dropdownButton;
    var dropDownListItems;
    
    var start = function(widgetId) {
        // Gets objects
        body = document.querySelector('body');
        dropdown = document.getElementById(widgetId);
        dropdownButton = dropdown.querySelector('.dropdown-header');
        dropdownList = dropdown.querySelector('.dropdown-content-list');

        // change the tabindex values to -1
        dropDownListItems = dropdown.querySelectorAll('.dropdown-content-list > *');
        dropDownListItems = [].slice.call(dropDownListItems);
        setTabIndexValue('-1');

        if(dropdownButton.querySelector("input")) {
            dropdownButton.querySelector("input").setAttribute('tabindex', '-1');
        }
        
        // Add event listeners
        body.addEventListener('click', screenClickHandler);
        dropdownButton.addEventListener('keydown', onDropdownKeypress);
        dropdownButton.addEventListener('click', onDropdownClick);
    };
    
    var isChildrenOf = function(element, parent) {
        // Checks if element is children of parent
        if(element && element.parentElement && element.parentElement === parent) {
            return element.parentElement;
        } else if( !element || element && element.parentElement && element.parentElement.classList.contains('page')) {
            return false;
        } else {
            return isChildrenOf(element.parentElement, parent);
        }
    };

    var setTabIndexValue = function (value) {
        dropDownListItems.forEach(function(item) {
            item.setAttribute('tabindex', value);
        });
    }
    
    var onDropdownClick = function() {
        toggleDropdown();
    };
    
    var onDropdownKeypress = function(e) {
        e.stopPropagation();
        
        if (e.keyCode == "13") {
            toggleDropdown();
        } else if(e.keyCode == "27" && dropdown.classList.contains('is--visible')) {
            dropdown.classList.remove('is--visible');
            dropdown.classList.add('is--hidden');
            dropdownButton.setAttribute('aria-expanded','false');
            dropdownList.setAttribute('aria-hidden','true');

            setTabIndexValue('-1');
        } else if(e.keyCode == "32" && dropdown.classList.contains('is--hidden')) {
            dropdown.classList.remove('is--hidden');
            dropdown.classList.add('is--visible');
            dropdownButton.setAttribute('aria-expanded','true');
            dropdownList.setAttribute('aria-hidden','false');

            setTabIndexValue('0');
        }
    };
    
    var toggleDropdown = function() {
        if(dropdown.classList.contains('is--visible')){
            dropdown.classList.remove('is--visible');
            dropdown.classList.add('is--hidden');
            dropdownButton.setAttribute('aria-expanded','false');
            dropdownList.setAttribute('aria-hidden','true');

            setTabIndexValue('-1');
        } else {
            dropdown.classList.remove('is--hidden');
            dropdown.classList.add('is--visible');
            dropdownButton.setAttribute('aria-expanded','true');
            dropdownList.setAttribute('aria-hidden','false');

            setTabIndexValue('0');
        }
    }
    
    var screenClickHandler = function(e) {
        // Closes dropdown if target doesn't have the current dropdown element as a parent
        if(dropdown.classList.contains('is--visible') && !isChildrenOf(e.target, dropdown)) {
            onDropdownClick();
        }
    };
    
    return {
        init: function(widgetId) {
            start(widgetId);        
        }
    };
};


Do you think it would be usefill for you if I made this a Forge component?

No doubts! If you can I would really appreciate it.  :)


Tamirys Barina wrote:

José Pedro Proença wrote:

Tamirys Barina wrote:

Tiago Oliveira wrote:

Is this closer to what you want to achieve?

[data-dropdown] div.dropdown-popup-row-selected:hover, [data-dropdown] div.dropdown-popup-row:hover {
    background-color: #00BFFF;
    border: 2px solid black;
    color: white;
}


(This is based on what José Pedro Proença answered previously.)

I don't think I will be able to achieve this with CSS, I tried everything I could, but thanks 


Yes :/ has I mentioned that color is controled by the browser, not CSS. For Firefox some of the solutions pasted here would work for example, but not for other browsers.

Todo this you will need to use a pseudo element, so, something that looks and behaves like a dropdown, but that is not a native dropdown. 

I use something like this when I need that type of behaviour:


Style class for the Dropdown container:

"dropdown is--hidden" + If(ExtendedClass <> "", " " + ExtendedClass, "")

Style class for the DropdownHeader container:

"dropdown-header select"

Style class for the DropdownHeaderContent_placeholder Placeholder:

"dropdown-header-text"

Style class for the dropdown-icon container:

"dropdown-icon"

Style class for the dropdown-content container:

"dropdown-content"

Style class for the DropdownContentList_placeholder Placeholder:

"dropdown-content-list"


You then need this CSS

SyntaxEditor Code Snippet

/* $4.2.4 - Patterns - Controls - Dropdown */
.dropdown,
.dropdown .dropdown-content .dropdown-content-list,
.dropdown .dropdown-header {
    width: 100%;
}

.dropdown .dropdown-header {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    background-image: none;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
       -ms-flex-pack: justify;
     justify-content: space-between;
}

.is--visible .dropdown-header.select {
    border: var(--border-size-s) solid var(--color-primary);
}

.dropdown .dropdown-content {
    position: absolute;
    display: block;
    z-index: 50;
}

.dropdown.is--visible .dropdown-icon {
    color: var(--color-primary);
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}

.dropdown .dropdown-icon .fa {
    font-size: 24px;
    width: auto;
}

.dropdown .dropdown-icon {
    color: var(--color-neutral-7);
    -webkit-transition: all 300ms ease-in-out;
            transition: all 300ms ease-in-out;
}

.dropdown .dropdown-content .dropdown-content-list {
    background: var(--color-neutral-0);
    border-radius: var(--border-radius-soft);
    border: var(--border-size-s) solid var(--color-neutral-4);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
    margin-top: var(--space-xs);
    max-height: 300px;
    overflow-y: auto;
    padding: var(--space-s) var(--space-none);
    /*position: absolute;*/
    -webkit-transition: opacity 180ms ease;
            transition: opacity 180ms ease;
            
    -servicestudio-position: relative;
    -servicestudio-opacity: 1;
}

.dropdown.is--visible .dropdown-content .dropdown-content-list {
    opacity: 1;
}

.dropdown.is--hidden .dropdown-content .dropdown-content-list {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: none;
    -servicestudio-opacity: 1;
}

.dropdown.is--visible .dropdown-content-list {
    opacity: 1;
    visibility: visible;
}

.dropdown.is--hidden .dropdown-content-list {
    opacity: 0;
    pointer-events: none;
}

.dropdown .dropdown-content .dropdown-content-list a {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    color: var(--color-neutral-9);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 40px;
    padding: var(--space-none) var(--space-base);
    margin: 0;
}

.dropdown .dropdown-content .dropdown-content-list a:hover {
    background-color: var(--color-neutral-2);
}

and JS from OutsystemsUIweb.

/* Closes the dropdown when the user clicks outside of dropdown */
var Dropdown = function() {
    var body;
    var dropdown;
    var dropdownButton;
    var dropDownListItems;
    
    var start = function(widgetId) {
        // Gets objects
        body = document.querySelector('body');
        dropdown = document.getElementById(widgetId);
        dropdownButton = dropdown.querySelector('.dropdown-header');
        dropdownList = dropdown.querySelector('.dropdown-content-list');

        // change the tabindex values to -1
        dropDownListItems = dropdown.querySelectorAll('.dropdown-content-list > *');
        dropDownListItems = [].slice.call(dropDownListItems);
        setTabIndexValue('-1');

        if(dropdownButton.querySelector("input")) {
            dropdownButton.querySelector("input").setAttribute('tabindex', '-1');
        }
        
        // Add event listeners
        body.addEventListener('click', screenClickHandler);
        dropdownButton.addEventListener('keydown', onDropdownKeypress);
        dropdownButton.addEventListener('click', onDropdownClick);
    };
    
    var isChildrenOf = function(element, parent) {
        // Checks if element is children of parent
        if(element && element.parentElement && element.parentElement === parent) {
            return element.parentElement;
        } else if( !element || element && element.parentElement && element.parentElement.classList.contains('page')) {
            return false;
        } else {
            return isChildrenOf(element.parentElement, parent);
        }
    };

    var setTabIndexValue = function (value) {
        dropDownListItems.forEach(function(item) {
            item.setAttribute('tabindex', value);
        });
    }
    
    var onDropdownClick = function() {
        toggleDropdown();
    };
    
    var onDropdownKeypress = function(e) {
        e.stopPropagation();
        
        if (e.keyCode == "13") {
            toggleDropdown();
        } else if(e.keyCode == "27" && dropdown.classList.contains('is--visible')) {
            dropdown.classList.remove('is--visible');
            dropdown.classList.add('is--hidden');
            dropdownButton.setAttribute('aria-expanded','false');
            dropdownList.setAttribute('aria-hidden','true');

            setTabIndexValue('-1');
        } else if(e.keyCode == "32" && dropdown.classList.contains('is--hidden')) {
            dropdown.classList.remove('is--hidden');
            dropdown.classList.add('is--visible');
            dropdownButton.setAttribute('aria-expanded','true');
            dropdownList.setAttribute('aria-hidden','false');

            setTabIndexValue('0');
        }
    };
    
    var toggleDropdown = function() {
        if(dropdown.classList.contains('is--visible')){
            dropdown.classList.remove('is--visible');
            dropdown.classList.add('is--hidden');
            dropdownButton.setAttribute('aria-expanded','false');
            dropdownList.setAttribute('aria-hidden','true');

            setTabIndexValue('-1');
        } else {
            dropdown.classList.remove('is--hidden');
            dropdown.classList.add('is--visible');
            dropdownButton.setAttribute('aria-expanded','true');
            dropdownList.setAttribute('aria-hidden','false');

            setTabIndexValue('0');
        }
    }
    
    var screenClickHandler = function(e) {
        // Closes dropdown if target doesn't have the current dropdown element as a parent
        if(dropdown.classList.contains('is--visible') && !isChildrenOf(e.target, dropdown)) {
            onDropdownClick();
        }
    };
    
    return {
        init: function(widgetId) {
            start(widgetId);        
        }
    };
};


Do you think it would be usefill for you if I made this a Forge component?

No doubts! If you can I would really appreciate it.  :)


On it!


Solution

Tamirys Barina, please check it out.

Let me know your feedback.

https://www.outsystems.com/forge/component-overview/8539/customizable-dropdown

To customize the hover behaviour you can use this:

.dropdown .dropdown-content .dropdown-content-list a:hover {
    background-color: var(--color-neutral-2);
}
Solution

Hi Tamirys Barina,

Add the below CSS definition to the Screen Style Sheet Section

Code Snippet

[data-dropdown] > div.dropdown-display, [data-dropdown] > select.dropdown-display  {
    background-color: #CBE6F6;
}


Check this:  CustomizedDropdown


Hope this helps you!

Regards,

Benjith Sam

José Pedro Proença wrote:

Tamirys Barina, please check it out.

Let me know your feedback.

https://www.outsystems.com/forge/component-overview/8539/customizable-dropdown

To customize the hover behaviour you can use this:

.dropdown .dropdown-content .dropdown-content-list a:hover {
    background-color: var(--color-neutral-2);
}

Thanks a lot, I will give a try :)


Tamirys Barina wrote:

José Pedro Proença wrote:

Tamirys Barina, please check it out.

Let me know your feedback.

https://www.outsystems.com/forge/component-overview/8539/customizable-dropdown

To customize the hover behaviour you can use this:

.dropdown .dropdown-content .dropdown-content-list a:hover {
    background-color: var(--color-neutral-2);
}

Thanks a lot, I will give a try :)


Great, let me know the results :)