Como o assunto foi resolvido no comentário, vou postar aqui o registro como resposta.
O que provavelmente acontece é que o user-agent
do iOS colocas alguns estilos por default no elementos. Então mesmo vc não declarando uma propriedade ou outra no elemento é possível que o próprio iOS esteja colocando esses estilos. Vc pode ler mais sobre user-agent
nessa pergunta. O que é User Agent StyleSheets?
É por isso também que algumas pessoas gostam de usar um normalizer.css
, ou reboot.css
como o próprio Bootstrap faz para tentar remover os estilos do user-agent
e deixar todos os navegadores com um CSS mais homogênico entre eles. Vc pode ler um pouco sobre isso nessa questão: CSS Reset ou Normalize?
Agora o workaroud que solucionou o problema da questão.
Primeiro colocar o que precisar com o prefixo -webkit-
pois esse é o vendor prefix do iOS e Safari/Chrome
-webkit-box-sizing: border-box;
box-sizing: border-box;
Segundo, evite propriedades long-hand, de preferencia por short-hand, pois alguma propriedade pode sobrescrever a outro, por exemplo, se vc tiver a estrutura como abaixo o estilo que fica valendo é o background-image: linear-gradient
setado pelo user-agent
e não a sua cor de background-color
background-image: linear-gradient(to bottom, #fff 0%, #000 100%); /* estilo user-agent */
background-color: #FC613E; /* seu estilo */
No entanto se vc colocar apenas background:
vc vai indicar que todas as outras propriedades do background vão ficar como initial
. Essa opção abaixo tem mais chance de prevalecer sobre o estilo do user-agent
.
background: #FC613E; /* seu estilo */
Agora para tentar garantir que vc está removendo todas as propriedades do elemento e sobrescrever com a sua vc pode setar um all: unset; tipo assim: input.frmbtncapt { all: unset; ... resto das propriedade ... Dessa forma vc deve remover todos os estilos do user-agent
. Vc pode ler mais sobre essa propriedade aqui: Propriedade all no CSS. Para que serve e como funciona?
Um exemplo de organização das propriedade para garantir que vão funcionar no iOS seria assim: (mas como disse vc ainda pode usar um normalizer.css
ou reset.css
)
input.frmbtncapt{
all:unset; /* remove estilos setados pelo user-agent */
width: 100%;
padding: 10px;
font-size: 18px;
margin: 2px;
cursor: pointer;
color: #fff;
border-width: 6px;
border-style: solid;
border-color: #50636b;
-webkit-box-sizing: border-box; /* coloca o prefixo do browser do iOS */
box-sizing: border-box;
background: #FC613E; /* usa a propriedade em short hand */
}
background-color
coloque apenasbackground
, e na propriedadebox-sizing
tb coloque com prefixo-webkit-box-sizing
e faz um teste ai pra ver se melhora. Se resolver me fala que dou uma resposta com mais detalhesinput.frminput {
e nessa classeinput.frmbtncapt {
Coloca como primeiro atributoall: unset;
tipo assim:input.frmbtncapt { all: unset; ... resto das propriedade ...
Testa colocando isso ai e me fala, se deu certo, depois vc pode testar tb colocando!important
... mas primeiro testa com oall: unset;
isso deve remover as classes padrão douser-agent
do iOS, ("deve", pois não tenho um ambiente de teste aqui para confirmar isso)