Customize Google Chart Column Filter

Question

I've been trying to figure out how to customize the column filter with my own style, but for some reason, Google have decided to put the rendered HTML at the bottom of the body-tag, in other words: the menu from column filter is attached to the DOM outside of the control itself at the bottom of the body-tag. Why on earth have they decided to put it there? This makes me a bit upset, because this is forcing me to put a lot of !important;after every new CSS rule I want.

I've also read about it in the Google Docs how to call the ui.cssClass, but this doesn't help me a bit. Is there anyone else who managed to fix this problem? Is it even possible to create your own markup for this?

Example here where you can see my point.

I will put some of my code below here so you can get a clear image on what's going on here.

JavaScript:

var columnFilterOptions = {
    filterColumnLabel: 'colLabel',
    ui: {
        caption: "Compare",
        label: false,
        allowTyping: false,
        allowMultiple: true,
        allowNone: false,
        selectedValuesLayout: 'below'
    }
};

HTML:

<div class="colFilter_div"></div>

CSS/LESS:

.charts-menu-button-disabled {
    background: @grayLighter !important;
    opacity: 0.5 !important;
}

.charts-menu-button-outer-box {
    width: 100%;
    border: 0 !important;
}

.charts-menu-button {
    background: @grayLighter !important;
    margin: 0 !important;
    margin-bottom: @smallGutter !important;
}

.charts-menu-button-open {
    background: @blueLight !important;
}

.charts-menu-button,
.charts-menu-button-inner-box {
    color: @grayDark !important;
    width: 100%;
    line-height: 55px;
    border: 0 !important;
    padding: 0 !important;
}

.charts-menu-button:before,
.charts-menu-button-inner-box:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 55px;
    overflow: hidden;
    background: @grayLight;
    text-align: center;
}

.charts-menu-button-open:focus:after {
    content: "";
    display: block;
    position: absolute;
    top: 17px;
    right: 27px;
    background: url(../../content/images/sprites.png);
    width: 7px;
    height: 19px;
    background-position: -31px -90px;
}

.charts-menu-button:after {
    content: "";
    display: block;
    position: absolute;
    top: 17px;
    right: 27px;
    background: url(../../content/images/sprites.png);
    width: 7px;
    height: 19px;
    background-position: -16px -110px;
}

.charts-menu-button-caption {
    .proxima-nova();
    padding-left: @smallGutter !important;
    font-size: 1.1em;
}

.charts-menu-button-dropdown {
    background: none !important;
}

.charts-menu,
.charts-menu-vertical {
    overflow: auto;
    width: auto !important;
    min-width: 11.19% !important;
    margin: 0;
    border: 0 !important;
    background: @grayLighter !important;
    border-top: 2px solid @green !important;
    padding-right: @smallGutter !important;
}

.charts-menuitem-content {
    width: 100%;
    color: @grayDark !important;
    .proxima-nova() !important;
    font-size: 16px !important;
    padding: 10px 0;
    display: block;
    border-top: 2px solid transparent;
}

.charts-menuitem-content:hover {
    color: @blue !important;
    border-top: 2px solid @blue;
}

.charts-menuitem-highlight {
    background: none !important;
    border: 0 !important;
    border-width: 0 !important;
    padding: 4px 0 4px 28px !important;
}
li.charts-container-horizontal {
    padding: 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: @grayLighter !important;
    .charts-link-button {
        .proxima-nova() !important;
        font-size: 1.1em !important;
        color: @grayDark !important;
    }
    .charts-control {
        .proxima-nova();
    }
}

Answer 1

You can use ui.cssClass in the ControlWrapper options, but you need to call up JQuery and embed it like this:

$(".columnFilter_class .charts-menu-button-caption").css({"color":"red"});

Doing that worked for me.