I. Overview
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.
II. Sample
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: