IOS does not apply CSS

Asked

Viewed 343 times

0

This my form is not working on IOS, but on Android is perfect.

In IOS it is as if no style has been applied.

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>
css

  • I also have several problems on IOS sometimes, they seem a life IE, a little improved.

  • @Lucascarvalho Truth, some CSS works perfectly, others nothing, as if no style had been applied.

  • Where is background-color just put background, and on the property box-sizing also place with prefix -webkit-box-sizing and make a test there to see if it improves. If you solve tell me that I give an answer with more details

  • @hugocsl yes, he put the border and a background color, far the color, but it was. Only that the formatting is far from the code.

  • @hugocsl do not understand, just with the form that is happening this, all the rest of the site outside form works perfectly.

  • 1

    In that class input.frminput { and in that class input.frmbtncapt { Set as first attribute all: unset; kind of: input.frmbtncapt { all: unset; ... resto das propriedade ... Try putting it there and tell me, if it worked, then you can test it by putting !important... but first test with the all: unset; this should remove the default classes from user-agent iOS, ("should", because I don’t have a test environment here to confirm that)

  • @hugocsl Sorry for the delay, it worked perfectly! Thank you very much...

  • Gladison you mind if I put my comment as an answer? So you can mark the answer and close the question as it is solved. Can it be? There I can give more details and explanations to those who fall into your question looking for an answer etc

  • @hugocsl Do this, it will be a pleasure.

  • Thanks Gladison, I transformed the comment and response and gave a series of details in case you want to delve a little into things ;)

Show 5 more comments

1 answer

2


As the subject was resolved in the comment, I will post here the record as reply.

What probably happens is that the user-agent iOS puts some styles by default in the elements. So even if you don’t declare a property or another in the element it is possible that iOS itself is putting these styles. You can read more about user-agent in that question. What is User Agent Stylesheets?

That’s also why some people like to wear one normalizer.css, or reboot.css as Bootstrap itself does to try to remove the styles of user-agent and leave all browsers with a more homogeneous CSS between them. You can read a little about this in this issue: CSS Reset or Normalize?

Now the workaroud that solved the problem of the.

First put what you need with the prefix -webkit- because that’s the vendor prefix iOS and Safari/Chrome

-webkit-box-sizing: border-box;
    box-sizing: border-box;

Second, avoid long-hand properties, preferably by short-hand, as some property may overwrite the other, for example, if you have the structure below the style that is worth is the background-image: linear-gradient set by user-agent and not its color of background-color

background-image: linear-gradient(to bottom, #fff 0%, #000 100%); /* estilo user-agent */
background-color: #FC613E; /* seu estilo */

However if you put only background: you will indicate that all other background properties will look like initial. This option below is more likely to prevail over the style of user-agent.

background: #FC613E; /* seu estilo */

Now to try to ensure that you are removing all the properties of the element and overwriting with your vc can set an all: unset; like this: input.frmbtncapt { all: unset; ... rest of the property ... That way you should remove all styles from user-agent. You can read more about this property here: All property in CSS. What it’s for and how it works?

An example of organizing the property to ensure it will work on iOS would be like this: (but as I said you can still use a normalizer.css or 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 */
}

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.