Font-family when applied to body tag shouldnt it apply for all the elements thats under the body?
I am seeing an issue where there is a font-family specified in body tag, but it doesnt take to text area placeholder , is there a reason why and the only way to fix that issue it to apply specifically font-family to placeholder?
24 Replies
Inputs are weird and you need to explicitly tell it to inherit the font
font-family: inherityes with form elements such as inputs and text areas you'll need to define it .
you can do it with
input, textarea: { font: inherit }
oops, late to the partyThanks guys 👌
dont forget the <select> element
Ok
🤡
* { font: inherit }you mean dont declare globally font: inherit?
DONT DO THAT
Yeah, but if this wasn't the help category I wouldn't have striked it out as a joke
i know you're joking
but he took it seriously
there are elements that have specific fonts for good reasons
I shan't post jokes in the help category ever again
like <code> or <pre>
add an emoji next time. it gives the right idea that the cursed crossed stuff is not serious
#root { textarea : {font : inherit}} is that the right syntax?
is it the font-family : inherit
Whats the difference between font : inherit and font-family : inherit
yesnt
Don't need the colon after
textarea
It depends if you want to inherit font and everything that comes with it, or just font-family and deal with the rest yourself, inheriting font also includes font-size for instance, and so if the text around the textarea is bigger or smaller the textarea will match, I either want it 1rem or I will fiddle with it manually and so I only worry about font-family, however it just depends on the needs of the siteyes, it will be right in a year or 2
also, he's nesting, which kinda works and doesnt
Just use a
textarea { font: inherit }, it has a low specificity and won't get in the way if you then try and change the fontOk, the font-family should remain same for all the elements, but as for the font-size , I think should remain same everywhere, but lets say one of the parent element had font-size of 20px the if one text-area is below that parent would that inherit that font-size?
what do you mean with "below"?
like
<div style={{font-size : 20px;}}> <textarea</textarea></div?
that's not below, that's inside
and yes, it will have the 20px
depends on what you need, thats good or bad
Ok got it thanks
<textarea
className={classes.text_area} if there is something like this in this case, I am specifying the class .text_area {
resize: none; //or do we need specify here the font-family?
Would it still consider the textarea { font: inherit } ?
There is code like this inside body
body{ input,
textarea {
border-width: 0px;
font-family: Roboto, sans-serif !important;
font-weight: 400;
font-size: 0.929rem;
border-radius: 0px !important;
}
}
But I have added textarea in some other file where I am defining like this
<textarea
className={classes.text_area} and just adding class of
.text_area { resize: none; - in this case would .font-family automatically inherit because i defined font-family in text-area in the body or do I need to mention the font-family here specifically?
.text_area { resize: none; - in this case would .font-family automatically inherit because i defined font-family in text-area in the body or do I need to mention the font-family here specifically?
you don't need the
body
everything is inside the body, always, in all websites, forever
and no, it's not "inheriting"
you're applying the value directly by selecting the textarea in the cssand no, it's not "inheriting" why wouldnt it inherit?
className={classes.text_area} am applying the styles for the class
not selecting textarea itself to apply styles