Black Lives Matter. Please consider donating to Black Girls Code today.

Dash typed text style in dropdown

I am using a dcc.dropdown for my app and have changed the styling. I have managed to change the background and color of text in the dropdown options ; however, I cannot seem to change the styling of the text that one can type in the dropdown menu (which is also a very useful way of entering a new value). Any idea how I could manage this?

Below is my code:

html.Div([html.H1(children='2.',
                          className="drop-zone-h1"),
                  dcc.Dropdown(id='category-col-selection-dropdown',
                               options=[],
                               placeholder="Select category column",
                               className="drop-zone-dropdown"
                               )],
                 className="drop-zone-columns"),

With:

.drop-zone-columns {
    display: grid;
    grid-template-columns: 2rem 1fr;
    align-items: center;
    margin: 1rem;
}

.drop-zone-dropdown {
    color: #fff;
    margin: 1rem;
    font-size: 1.428571rem !important;
    font-family: SourceSansProSemiBold;
    /*width:380px*/
}