Customizing Color Badges

The image below illustrates the default color badges for use with Option Fields.

If you would like to further customize a color badge, you can do so using custom CSS.

For your reference, here is a sample of the current CSS being used for the first color badge (badge-wh-1). You can customize this CSS code to customize this color badge as well as any other color badge to your desired color badge display.

.badge-wh-1 {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    background-color: #7B3CEC;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
    text-align: center;
    border-radius: 10px;
}