CSS Modify the Style of Drop-down Box

1.1 Requirement

How to change the font color, font size, background color and button style of the drop-down box in the parameter pane? Just follow the steps below.

1.2 Solution

Use CSS to change the font color, font size, background color and button style for the drop-down box.

2.1 Write CSS codes

Create a new TXT file, name it drop-down-box.css and click Save. Input the following CSS codes:

.fr-trigger-btn-up{
     background-color: black;
}
.fr-trigger-btn-over{
     background-color: black;
}
.fr-trigger-btn-down{
     background-color: #303030;
} 
.fr-combo-list-item{
     color: white;
     background-color: black;
     font-size: 14px;
} 
.fr-combo-list{
     border:none ; 
} 
.fr-combo-selected{
     background-color: #292929;
     border-color: red; 
} 
.fr-combo-list-item-noselect{
      color: red !important; 
}

Note

.fr-trigger-btn-up: Class name of the Drop-down Button

background-color: Set the background color to black, or set 6-digit hexadecimal numbers. Use these codes to change drop-down button colors.

.fr-trigger-btn-over,down : Set background colors on mouseover and mouseout

.fr-combo-list-ltem: Color, background color and font size of the drop-down list

.fr-combo-list: set no external border and none border line

.fr-combo-selected: Set background color on mouse hover

.fr-combo-list-item-noselect:  If you want to highlight non-selected items in the drop-down list, you can set the highlight color as you need. Here we set them to red and important represents the highest priority.

2.2 Reference CSS file

Save the edited CSS file “drop-down-box.css” to a location under \webapps\webroot\help\css. Open the template and click [Template]＞[Web Attributes] ＞[Reference CSS].

Note

Change styles and colors as you need.

2.3 Preview

Click [Page Break Preview] and the preview effects are shown as follows:

3.1 Template

Modify the Drop-down Box Style.cpt

3.2 CSS file

drop-down-box.css