0

Este meu formulário não está funcionado no IOS, porém no Android fica perfeito.

No IOS é como se não tivesse sido aplicado nenhum estilo.

inserir a descrição da imagem aqui

form.frm-captura{
    width: 100%;
}
input.frmbtncapt{
    width: 100%;
    padding: 10px;
    font-size: 18px;
    box-sizing: border-box;
    margin: 2px;
    cursor: pointer;
    background-color: #FC613E; 
    color: #fff;
    border-width: 6px;
    border-style: solid;
    border-color: #50636b;
}
input.frminput{
    width: 100%;
    padding: 10px;
    font-size: 18px;
    box-sizing: border-box;
    background-color: #FC613E;
    margin: 2px;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc;
}

<form action="dados" method="post" class="frm-captura" name="frmcapt">
<input type="text" class="frminput" value="" name="emailcapt" placeholder="Insira seu email aqui!" required="required">
<input type="hidden" value="<?php echo $painel_noticias[0]; ?>" name="escondido">
<input type="submit" class="frmbtncapt" name="btnsub" value="BAIXAR O EBOOK AGORA!">
</form>
10
  • Eu também tenho diversos problemas no IOS as vezes, eles parecem um IE da vida, um pouco melhorado. Commented 15/02/2019 às 9:40
  • @LucasCarvalho Verdade, alguns CSS funcionam perfeitamente, outros nada, como se não tivesse sido aplicado estilo algum.
    – Gladison
    Commented 15/02/2019 às 9:42
  • Onde é background-color coloque apenas background, e na propriedade box-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 detalhes
    – hugocsl
    Commented 15/02/2019 às 9:43
  • @hugocsl sim, ele colocou a borda e uma cor de fundo, distante a cor, mas foi. Só que a formatação está longe do código.
    – Gladison
    Commented 15/02/2019 às 9:50
  • 1
    Nessa classe input.frminput { e nessa classe input.frmbtncapt { Coloca como primeiro atributo all: 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 o all: unset; isso deve remover as classes padrão do user-agent do iOS, ("deve", pois não tenho um ambiente de teste aqui para confirmar isso)
    – hugocsl
    Commented 15/02/2019 às 10:18

1 Resposta 1

2

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 */
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .