how to stop background-color: buttonface; on submit button?

Question

I have a submit button, which I have styled and looks correct on Safari, Chrome, Firefox and IE, but as soon as I view the site on an iPad this input button has got a slight gradient going through it and has round corners!

I do not know why this is doing this when I reight click it and inspect it and look at some of the default styles (which I am not applying to it I see)

input[type="button" i], input[type="submit" i], input[type="reset" i],         input[type="file" i]::-webkit-file-upload-button, button {
  align-items: flex-start;
  text-align: center;
  cursor: default;
  color: buttontext;
  padding: 2px 6px 3px;
  border: 2px outset buttonface;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
  background-color: buttonface;
  box-sizing: border-box;
  }

I’m guessing background-color: buttonface; whatever that is is being some how applied to it. How do I stop that? I just want my own solid color.

Any help would be great

Answer 1

Try to add -webkit-appearance: none; on your style.

The browsers apply default style in form elements. You can remove it with the code above.

Answer 2

Or try this css on the specific element:

background-color: transparent;