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 :)

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

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.)

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

Tamirys Barina wrote:

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?

Hi,

please, if you have more doubts check this information:

• Cascading Style Sheets (CSS)
• How can we dynamically override Module CSS(Theme) with external CSS file in Mobile?
• CSS Best Practices with OutSystems

Cheers,
Miguel

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);
}

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

It turns out that <option> styles are controlled by OS. There is not much you can change about it. Just a few things.

css - How to style the option of an html "select" element? - Stack Overflow