C17Escalar los elementos de formulario que contienen texto

Aplicabilidad

HTML, CSS

Descripción

El objetivo de esta técnica es garantizar que los controles de formulario basados en texto cambien de tamaño cuando se cambia el tamaño del texto en el agente de usuario. Esto permitirá a los usuarios introducir texto y leer lo que han escrito en los campos de entrada, porque el texto se muestra en el tamaño que el usuario necesita.

Los controles de formulario basados en texto incluyen los campos input (text y textarea), así como los botones.

Ejemplos

<h1>Contact Us</h1>
<p>Please provide us with your details and we will contact you as soon as we can.
  Note that all of the form fields are required.</p>
<div>
  <label for="fname">First Name</label>
  <input autocomplete="given-name" id="fname" name="fname" type="text">
</div>
<div>
  <label for="lname">Last Name</label>
  <input autocomplete="family-name" id="lname" name="lname" type="text">
</div>
<div>
  <label for="phone">Telephone</label>
  <input autocomplete="tel" id="phone" name="phone" type="text">
</div>
<div>
  <label for="email">Email</label>
  <input autocomplete="email" id="email" name="email" type="text">
</div>
<input id="submit" name="submit" type="submit" value="Submit">

h1 { font-size: 2em; }
p, label { font-size: 1em; }
label { display:block; }
input { font: inherit; }
div { margin-bottom: 1rem; }

Pruebas