[Resolved] Border Radius issue on Safari

[Narender]

Hey Folks!
I need a small help. On my website https://www.apssb.in I use a Search Form in Footer Widgets Section with the following CSS to make it look round:

.widget .search-field {
    border-radius: 15px 0 0 15px;
}

.widget .search-submit {
    border-radius: 0 15px 15px 0;
}

It works flawlessly in Firefox, Edge, and Chrome but looks off in Safari.

^ Working fine in Edge, Chrome, and Firefox.

^ Doesn’t work as expected in Safari

[David]

Hi there,

what you’re seeing there is a browser style that needs disabling. Try adding this to remove it:

input[type="search"] {
    -webkit-appearance: none;
}

[Narender]

Thank you very much, David. It was easy 🙂

[David]

Glad to be of help

[Author]

Posts