'How can we increase the only font-size of text area

How can we increase the only font size of the text we write there , since my code is increasing the whole size of text area.

I was trying to make web sth like type tester but i am gettin stucked at this one thing because when i do font-size it increases the whole size of text area

HTML

<textarea name="" id="mywords" cols="102" rows="20" placeholder=" START TYPING" ></textarea>

Css

textarea{
    background-color: rgb(78, 94, 133);
    border-radius: 10px 10px 20px 20px;
    border: 1px solid rgb(17, 197, 134);
    font-size: 100%;
    font-family: Arial, Helvetica, sans-serif;
}

PS. This is only part of the code.

htmlcss


Solution 1:[1]

textarea{
    background-color: rgb(78, 94, 133);
    border-radius: 10px 10px 20px 20px;
    border: 1px solid rgb(17, 197, 134);
    font-size: 100%;
    font-family: Arial, Helvetica, sans-serif;


}
<textarea name="" id="mywords" cols="102" rows="20" placeholder=" START TYPING" ></textarea>

I played with the font-size of the textarea and realised that the textarea is adjusting itself depending on the number you put in font-size.

To fix that, you can either insert a lower number in font-size, or set a max height for your textarea:

textarea{
    background-color: rgb(78, 94, 133);
    border-radius: 10px 10px 20px 20px;
    border: 1px solid rgb(17, 197, 134);
    font-size: 200%;
    font-family: Arial, Helvetica, sans-serif;
    max-height: 200px;
    max-width: 200px


}
<textarea name="" id="mywords" cols="102" rows="20" placeholder=" START TYPING" ></textarea>

P.S: Notice that if you have a max-height and max-width set on your textarea, you can now have really large text if you want, as the maximum is no longer 100%.

Solution 2:[2]

You may assign font size in vw for responsiveness across multiple devices.

textarea {
      background-color: rgb(78, 94, 133);
      border-radius: 10px 10px 20px 20px;
      border: 1px solid rgb(17, 197, 134);
      font-size: 7vw;  // can't you make like this replace 7vw with  your expected value
      font-family: Arial, Helvetica, sans-serif;
}
  <textarea name="" id="mywords" cols="102" rows="20" placeholder=" START TYPING" ></textarea>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rani Giterman
Solution 2

Related Questions