CODEWITHSUNDEEP
htmlcss
margsenjo
margsenjo

Reputation: 129

Firefox and Safari show different button styles

I have created a CSS button on my site and validated the design via Google Chrome.

I used the following designs:

.btn-kabumm {
    background-color: #87cbac;
    color: #fff;
    border-color: #87cbac; 
}

.btn-lg {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
}

However, in Safari and FF the button gets a weird extra border.

Chrome:

enter image description here

Firefox/Safari:

enter image description here

I am not quite sure how to get rid of that though.

Upvotes: 1

Views: 2551

Answers (3)

Marius Razoux
Marius Razoux

Reputation: 27

Just add border:none; to your css it will force chrome to hide his predefined style for the button input

Upvotes: -1

Zachary Craig
Zachary Craig

Reputation: 2220

It's because you forgot to give your button the bootstrap root btn class that all buttons are meant to have, see the documentation on bootstrap buttons here

EG:

<input id="nf-field-9" value="Absenden" class="ninja-forms-field btn btn-kabumm btn-lg btn-rounded nf-element" type="button">

is how it should be, but you had 

<input id="nf-field-9" value="Absenden" class="ninja-forms-field btn-kabumm btn-lg btn-rounded nf-element" type="button">

Compare the code with the button in your carousel, and you'll see that's the difference between the two

Adding the proper class results in this:

enter image description here

Screenshot taken on Firefox v58.0b3 (64-bit) on Linux :)

Upvotes: 3

Czcibor
Czcibor

Reputation: 66

Try to add all properties to the bordered element. Border-style. Border Width etc for example 

 .item{
Border: 1px solid transparent; 
}

Probably safari has some default border styling so forcing IT by yourself you can resolve this issue.

Upvotes: 0

Related Questions