CODEWITHSUNDEEP
htmlcsstwitter-bootstrapless
scrowler
scrowler

Reputation: 24435

Customizing Bootstrap: disabled primary button border

I am using the Bootstrap template customization generator to change the colours of the default states and buttons using them.

I've changed all the states correctly, but when generating a button group and using a primary button with disabled state, it is still generating a blue border which I can't seem to find an option to change in Bootstrap's generator. Code:

<a href="#" class="btn btn-primary disabled">
    <strong>Title here</strong>
    <br><small>Hello world!</small>
</a>

This is generating this (note the light border compared to the button on the left which has a dark border because it is not disabled):

enter image description here

Inspecting the element shows this:

.btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover, .btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, 
.btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active, .btn-primary[disabled]:active, 
fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, 
.btn-primary[disabled].active, fieldset[disabled] .btn-primary.active {
    background-color: #428bca; 
    border-color: #357ebd;            /* these are light blue colours */
}

I can't seem to find anywhere in the template generator that refers to @btn-primary-disabled-border or similar variations of that. I've looked through all references to disabled in the page and it doesn't seem to reference it.

Am I missing something somewhere or does this need to be a manual CSS override? I'd like to keep this to using Bootstrap's LESS compiler if possible.

Edit: here's a fiddle and here's a link to my current Bootstrap definitions

Upvotes: 3

Views: 29168

Answers (2)

Arvind Chourasiya
Arvind Chourasiya

Reputation: 17482

Use css style for button

<button style="border: none;" (click)="List()" type="button" class="btn-link btn-anchor">Sign up</button>

Upvotes: -1

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13998

Remove the transparent border property from your .btn class like below.

 .btn{
  border:0px solid transparent; /* this was 1px earlier */
 }

DEMO

Upvotes: 6

Related Questions