Home / Questions / 277764
Accepted
Fernanda
Asked: 2020-07-10 08:00:07 +0800 CST 2020-07-10 08:00:07 +0800 CST

font-size of a textarea shrinks when filled by the user

  • 772

I have a form with input and textarea (like any other) and I increase the font-size to make it easier to read, the problem is that when you start to fill in the fields, everything is written much smaller and I don't know why?

I pass code so you can see what mistake I'm making...

form textarea,
form textarea::placeholder,
form textarea::-webkit-input-placeholder {
  height: 70px;
  font-size: 1.5em;
  overflow-y: hidden;
}

form input,
form input::placeholder,
form input::-webkit-input-placeholder {
  font-size: 1.5em;
}
<form action="confFormularioBriefSeg.php" id="form2" name="form2" method="post">
  <input type="text" id="octava" class="brief boton" name="octava" placeholder="Nombre o denominación">
  <textarea name="novena" id="novena" class="textarea boton" placeholder="Descripción breve(dicho “en criollo” para entender el servicio a comunicar)"></textarea>
</form>

css3

2 Answers

  1. Best Answer

    The best way to achieve what you want is using font-family: inherit; font-size: inherit;like this:

    form {
  font-size: 2em;
}

form textarea,
form textarea::placeholder,
form textarea::-webkit-input-placeholder {
  height: 70px;
  font-family: inherit;
  font-size: inherit;
  overflow-y: hidden;
}

form input,
form input::placeholder,
form input::-webkit-input-placeholder {
  font-size: inherit;
}
    <form action="confFormularioBriefSeg.php" id="form2" name="form2" method="post">
  <input type="text" id="octava" class="brief boton" name="octava" placeholder="Nombre o denominación">
  <textarea name="novena" id="novena" class="textarea boton" placeholder="Descripción breve(dicho “en criollo” para entender el servicio a comunicar)"></textarea>
</form>

    • 3

  2. Just delete the dot that has the .1.5em, add 4more dots to emthe dot textareaso that the letter has the same size

    form textarea,
form textarea::placeholder,
form textarea::-webkit-input-placeholder {
  height: 70px;
  font-size: 1.9em;
  overflow-y: hidden;
}

form input,
form input::placeholder,
form input::-webkit-input-placeholder {
  font-size: 1.5em;
}
    <form action="confFormularioBriefSeg.php" id="form2" name="form2" method="post">
  <input type="text" id="octava" class="brief boton" name="octava" placeholder="Nombre o denominación"><br><br>
  <textarea name="novena" id="novena" class="textarea boton" placeholder="Descripción breve(dicho “en criollo” para entender el servicio a comunicar)"></textarea>
</form>

    • 0