Advanced CSS Customization for dropdown in Layouts

When everviz's built-in layout editor doesn't offer the exact look you need, you can override the layout elements (such as dropdowns, buttons, and tabs) by adding custom CSS to your CMS.

Example

1. Identifying everviz Elements

everviz UI components are wrapped in specific classes. The targets for the dropdown selector are:

.tabs-container: The outer wrapper for the dropdown element.
.dropdown-container select: The dropdown element.

2. Implementation: Custom CSS for the dropdown

The following example shows a dropdown layout that has been customized with external CSS to feature a bold brand color, custom height, and a bespoke arrow icon. We use height and line-height parity to ensure the text is perfectly centered vertically.

Example:

CSS code for the example:

.tabs-container select {
    /* 1. Reset Height and Line-Height */
    height: 48px !important;       /* Explicit height */
    line-height: 48px !important;  /* Match height for vertical centering */
    padding: 0 40px 0 15px !important; /* Zero top/bottom padding since height is set */
    
    /* 2. Visual Style */
    border: 2px solid #28277e !important;
    color: #28277e !important;
    background-color: #ffffff !important;
    font-family: 'Lato', sans-serif !important;
    font-weight: bold !important;
    font-size: 16px !important;
    
    /* 3. Dropdown Mechanics */
    appearance: none !important;
    -webkit-appearance: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;

    /* 4. The Arrow (Adjusted to stay centered) */

    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2328277e'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 20px !important;
    
    vertical-align: middle !important; /* Align with any adjacent text */
}

<p>
	/* Hover effect */
.tabs-container select:hover {
    background-color: #28277e !important;
    color: #ffffff !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E") !important;
}