FYI, this is the normal swatch selector with default styling:
Changing CSS of the Main Selection Box
The main selection box to style has a class of .swatch__trigger:
Here I have changed the font color and the border color and size:
.swatch__trigger{
color: #FF0000;
border: 5px solid #00FF00;
}
Here I have only changed the background color:
swatch__trigger{
background-color: orange;
}
Changing CSS of the Swatch Selector Dropdown
This is your standard colored dropdown swatch selector:
Standard mouse over effect:
.swatch:hover{
background-color: #b2b2b2;
}
Standard selected effect:
.swatch.selected {
background-color: #305c91;
color: #ffffff;
}
Border color changed:
.swatches {
border: 5px solid #00FF00;
border-top: 0;
}
Changing swatch background colors:
.swatch {
background-color: darkblue;
color: white;
}
FYI, Here are the swatch select CSS options:
.swatch__trigger{
}
.swatches {
}
.swatch {
}
.swatch:hover {
}
.swatch.selected {
}
Changing CSS of the Font Picker
Font selector before dropdown:
Font selector open:
Font Select Open Options:
FYI, Font select CSS options:
.font-select > span {
}
.font-select-active > span{
}
.font-select .fs-search{
}
.font-select .fs-search input{
}
.font-select .fs-results li{
}
.font-select .fs-results li.active{
}