En el desarrollo web para iOS, es común encontrar comportamientos inesperados con los elementos input, especialmente en lo que respecta a la obtención de foco y la apariencia del borde.

Problemas Comunes

• El campo input no responde a la obtención de foco.
• Tras obtener el foco, aparece un contorno azul persistente que border: none no elimina.

Estilos CSS y su Impacto

Conisderemos las siguientes reglas CSS:

.contenedor-formulario input {
  display: inline-block;
  margin-left: 0.225rem;
  height: 1rem;
  border: none !important; /* Intenta eliminar el borde */
  outline: none; /* Objetivo: controlar el contorno al obtener foco en iOS */
  color: #000000;
  font-size: 100%;
  width: 50%;
  -webkit-user-select: auto !important; /* Posible causa de no poder obtener foco */
}

Explicación de propiedades clave:

outline

La propiedad outline dibuja una línea alrededor del borde de un elemento, fuera de su espacio. Es útil para destacar elementos, pero no ocupa espacio en el layout. La propiedad abreviada outline permite definir sus subpropiedades (outline-color, outline-style, outline-width) en una sola declaración.

Nota: La compatibilidad de outline en Internet Explorer 8 y versiones posteriores requiere una declaración DOCTYPE.

user-select

Esta propiedad de CSS determina si el usuario puede seleccionar texto dentro de un elemento. Las palabras clave comunes incluyen:

• none: Impide la selección de texto.
• auto: El comportamiento depende del contexto (elementos editables, el valor del padre, etc.). Por defecto, permite la selección.
• text: Permite la selección de texto.
• all: Selecciona todo el contenido del elemento al hacer doble clic o en un contexto de edición.
• contain: Permite la selección, pero la selección queda limitada dentro de los bordes del elemento.

Existen prefijos específicos para navegadores como -webkit- (Chrome, Safari, Edge) y -moz- (Firefox). Es importante notar que -webkit-user-select: all; puede no funcionar como se espera en Safari, permitiendo la escritura en lugar de la selección.

Resolución de Problemas Específicos de iOS

1. Campo input no obtiene foco:

El valor -webkit-user-select: none; aplciado directamente al input o a un conteneder padre puede impedir que el elemento reciba el foco. Asegúrate de que sea auto o text si se necesita interacción.

2. Contorno azul persistente después del foco:

El navegador aplica un contorno predeterminado (a menudo azul) a los elementos que reciben el foco. Aunque border: none; elimina el borde normal, no afecta este contorno de foco. La propiedad outline: none; está diseñada precisamente para eliminar este contorno predeterminado del navegador.

Ejemplo de Código para Evitar la Selección de Texto

Aquí tienes un ejemplo que ilustra cómo usar user-select para controlar la selección:

<p>Puedes seleccionar este texto.</p>
<p class="no-seleccionar">No puedes seleccionar este texto.</p>
<p class="seleccionar-todo">Haz doble clic para seleccionar todo.</p>

<style>
.no-seleccionar {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.seleccionar-todo {
  -moz-user-select: all;
  -webkit-user-select: all;
  -ms-user-select: all;
  user-select: all;
}
</style>

Al combinar outline: none; y asegurarse de que -webkit-user-select esté configurado apropiadamente (generalmente auto o text para campos de entrada), se pueden resolver los problemas comunes de interacción y apariencia en iOS.