TF35Lightning TF35Lightning - 3 months ago 64
CSS Question

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

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

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.