I have a form that works perfectly on pc. But on mobile, even though the keyboard appears, I can't type in the inputs.
This is the html:
<article>
<section>
<h2>Formulario de Contacto</h2>
<form action="" method="post">
<p>Los campos marcados con <span>*</span> son obligatorios</p>
<h3>Nombre completo<span>*</span></h3>
<input type="text" name="name" class="form__field">
<h3>Email<span>*</span></h3>
<input type="email" name="email" class="form__field">
<h3>Asunto<span>*</span></h3>
<input type="text" name="subject" class="form__field">
<h3>Mensaje<span>*</span></h3>
<textarea id="message-field" name="message" class="form__field"></textarea>
<input type="submit" id="submit-button" name="submit">
</form>
</section>
</article>
And this is the css:
section {
margin-left: auto;
margin-right: auto;
width: fit-content;
}
section h2{
padding-top: 0rem;
padding-bottom: 1rem;
font-size: 3rem;
}
form{
margin-left: auto;
margin-right: auto;
}
form p{
padding-bottom: 3rem;
font-size: 1.3rem;
}
form span{
color: #f00;
}
.form__field{
width: 100%;
background-color: #ddd;
border-color: #ccc;
border-style: solid;
height: 1.5rem;
font-size: 1rem;
resize: none;
border-width: 0.1rem;
margin-bottom: 1rem;
}
#message-field{
height: 10rem;
font-size: 1.3rem;
}
form h3{
padding-top: 1rem;
padding-bottom: 1rem;
font-size: 1.5rem;
}
#submit-button{
padding: 1rem 2rem;
margin-top: 1rem;
margin-bottom: 10rem;
background-color: #0000f0;
border-color: #45C2E3;
border-style: solid;
color: #fff;
border-width: 0.2rem;
}
#submit-button:hover{
background-color: #45C2E3;
border-color: #0000f0;
color: #000;
}
@media(max-width: 820px) {
section h2{
padding-top: 1rem;
}
}
@media(max-width: 580px) {
section h2{
font-size: 2rem;
}
form p{
font-size: 1rem;
}
#message-field{
height: 8rem;
}
form h3{
font-size: 1.1rem;
}
}
I looked above that your problem is with an Iphone (and obviously the Safari browser)
Therefore, you just have to add this to your CSS and it will be solved:
That's because in Safari browser,
user-select: text
it doesn't work, that's why we need to provide the-webkit-user-select: text
browser specific rule.