All Collections
Usage
How to
Swatch-Picker and Font-Picker CSS Customization
Swatch-Picker and Font-Picker CSS Customization
Shevaughn avatar
Written by Shevaughn
Updated over a week ago

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{

}

Did this answer your question?