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 THE ONLY PART OF CODE
CodePudding user response:
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%.
CodePudding user response:
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>