Add css for selectize to match input boxes

This commit is contained in:
JonnyWong16 2018-01-07 23:37:18 -08:00
parent 71c20002b8
commit a1349ff8a6

View file

@ -71,11 +71,13 @@ select.form-control {
border-radius: 3px;
transition: background-color .3s;
}
.react-selectize.root-node .react-selectize-control {
.react-selectize.root-node .react-selectize-control,
.selectize-control.form-control .selectize-input {
color: #fff !important;
border: 0px solid #444 !important;
background: #555 !important;
padding: 1px 2px;
transition: background-color .3s;
}
.react-selectize.root-node .react-selectize-control .react-selectize-placeholder {
color: #fff !important;
@ -83,6 +85,13 @@ select.form-control {
.react-selectize.root-node .react-selectize-control .react-selectize-toggle-button path {
fill: #fff !important;
}
.react-selectize.root-node .simple-value,
.selectize-control.multi .selectize-input > div {
background: #444444 !important;
color: #ffffff !important;
padding-bottom: 2px !important;
transition: background-color .3s;
}
.react-selectize.root-node .simple-value span {
padding-bottom: 2px !important;
}
@ -90,13 +99,25 @@ select.form-control {
padding-top: 3px !important;
padding-bottom: 3px !important;
}
select.form-control:focus {
select.form-control:focus,
.react-selectize.root-node.open .react-selectize-control,
.selectize-control.form-control .selectize-input.focus {
outline: 0;
outline: thin dotted \9;
color: #555;
background-color: #fff;
color: #555 !important;
background-color: #fff !important;
transition: background-color .3s;
}
.react-selectize.root-node.open .simple-value,
.selectize-control.multi .selectize-input.focus > div,
.selectize-control.multi .selectize-input > div.active{
background: #efefef !important;
color: #333333 !important;
transition: background-color .3s;
}
.react-selectize.root-node.open .react-selectize-control .react-selectize-toggle-button path {
fill: #999 !important;
}
select.form-control option {
color: #555;
background-color: #fff;