customizing style of button

[bolemeus]

Hello,

I'm trying to add a custom class to the button in order to have some more control over the style of the button.

I've just upgraded from a lower version and noticed that it is now possible to pass the bootstrap class btn-* to the nya-bs-select element, which partly solves what I'm trying to do.

The problem I'm having is that the element visually looks like a button, because I've also included the bootstrap-style stylesheet. This feels wrong because it basically is an advanced html-select element, and they don't look like buttons either.

In the version I'm replacing I just added the required classes to the template, but I'd like to avoid doing that this time. Is it at all possible to add custom classes to the button, other than the bootstrap classes.

The class I want to add to the button is btn-select, which basically makes the button look like a regular select element.

My code:

<ol class="col-sm-12 nya-bs-select btn-select btn-sm" ng-model="form.language" 
    ng-change="setLanguage(form.taal)">
    <li nya-bs-option="language in languages | filter: {active:true}">
        <a ng-bind-html="vm.formatIcon(language)"></a>
    </li>
</ol>

[lordfriend]

Sorry, It is not possible to add arbitrary class to button. Maybe, you need to write some styles to overwrite the button style

[GedMarc]

I'll throw this into my fork as well

[GedMarc]

I also need capability to add custom (close/select by group etc) buttons and etc so will bundle this in with that.

[bolemeus]

Thanks GedMarc,

The problem I'm having with overriding the style of the button is that the classes I would have to base it on are too generic. I think the class the button gets by default is something like dropdown-toggle. I would be more confident overriding that class if it was called something like nya-dropdown-toggle.

[bolemeus]

I've modified the css a bit now, to make the button look and behave more like other select elements. I'm just going to leave it here. I noticed that the root element of the directive already had a very specific class, so I'm using that now in my css rules.

.nya-bs-select .dropdown-toggle {
    background-image: none !important;
}

.nya-bs-select.open .dropdown-toggle {
    background-color: inherit !important;
    border-color: rgba(82,168,236,.8) !important;
    box-shadow: 0 0 8px rgba(82,168,236,.6) !important;
}

.nya-bs-select .dropdown-toggle:hover,
.nya-bs-select .dropdown-toggle:focus {
    background-color: inherit;
}

.nya-bs-select .dropdown-toggle {
    text-align: left;   
    padding-left: 6px;
}

.nya-bs-select .dropdown-toggle:hover {
    border-color: #ccc;
}