Different appearance of buttons in iOS safari

Question

Different appearance of buttons in iOS safari

Navigation

#1 by (0 votes)

0

I have a button but in iOS Safari it looks different. I have tried with this code -webkit-appearance: none; and it does not work for me.

This is the CSS of the button (also in JSFiddle ):

button {
  padding: 5px 20px;
  overflow: hidden;
  background-color: #3fc2f0;
  /*background-image: linear-gradient(#3fc2f0, #3fc2f0);*/
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  border-radius: 24px;
  -webkit-box-shadow: 0 2px 5px #19748f;
  -moz-box-shadow: 0 2px 5px #19748f;
  box-shadow: 0 2px 5px #19748f;
  font-family: Arial;
  color: #ffffff;
  font-size: 16px;
  position: relative;
}

<button>Comprar</button>

That looks like this in different browsers (the size is the same, the problem is the different border):

Even with the same CSS they look different on the same iPad. Why does that happen and how can I solve it?

css3 css ios safari

asked by Daniel 28.05.2017 в 22:47

source

1 answer

Assign user and permissions to SQL DB by means of Script How can I use the $ _SESSION, to send data to my corresponding account

score 0 · Answer 1

I think this can help you:

 button{
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}

In case it does not work for you, and even though it is not a good practice, you can add (! important), thus:

button{
        -webkit-appearance: none;
        -webkit-border-radius: 0;
    }

I hope it serves you;)