Why ≪Textarea≫ and ≪Textfield≫ Not Taking Font-Family and Font-Size from Body

body {
  background: grey;
}

.form-control {
      width: 40%;
      padding: 10px;
      margin: 10px;
      border-radius: 1.5em;
      font-size: 1.1em;
      background-color: $white;
      border: none;
      color: black;
      resize: none;
      &:focus {
        outline: 0;
      }
    }
    button {
      padding: .5em .75em;
      margin: 10px;
      font-size: 1.1em;
      border-radius: 1.5em;
      background-color: $white;
      border: none;
      outline: 0;
      color: black;
      &:hover {
        color: $purple;
      }
    }
    textarea{
    font-family:'Tahoma';
    }

  <form action="https://formspree.io/f/" method="POST">
          <input
            name="name"
            type="text"
            class="form-control"
            placeholder="Full name"
            required
          />
          <br />
          <input
            name="_replyto"
            type="email"
            class="form-control"
            placeholder="Email"
            required
          />
          <br />
          <textarea name="message" class="form-control" placeholder="Message" rows="5" required></textarea>
          <br />
          <button type="submit">Send</button>
        </form>

Why does textarea not accept relative font-size if none of it's parent has fixed size? (Firefox 18.0 Mac)

In Firefox (I don't know if other browsers have that too) you have the possibility to set two default font-sizes:

• Default font-size (16px)
• Default font-size for text having the generic font-family monospace (13px)

Since the default font-size in my example is just 1em (for the textarea and the body) it's 1 times the default font-size which is 13px for all monospaced text and 16px for all other text.

Here is an article that has a great explanation and also a usable work-around to this:
http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/

How to change font size in a textbox in html

For a <input type='text'> element:

input { font-size: 18px; }

or for a <textarea>:

textarea { font-size: 18px; }

or for a <select>:

select { font-size: 18px; }

you get the drift.

Spec for not-inheriting certain font settings in textarea

The answer to your question is pretty simple and it's not related to the specification. If you take the example of a textarea inside Google Chrome and inspect the element you will get the following:

The browser is applying a default font-family (and many other properties) so the inherit rule no more apply.

Now if you want to know how these default style are defined you need to consider each browser and its implementation since this is out of the scope of the CSS specification.

Font-family is not inherited to the form input fields?

Yes, you need to place the font in the input tag.

input{
  padding:5px;
  font-size:16px;
  font-family:'Lucida Casual', 'Comic Sans MS';    
}

http://jsfiddle.net/jasongennaro/3fkNJ/1/

You can also use inherit to set the font on form fields.

input, textarea, select { font-family:inherit; }

http://jsfiddle.net/jasongennaro/3fkNJ/7/

EDIT - explanation added

Most browsers render text inside form elements as that of the user's operating system. This is to keep, as I understand it, a common look and feel for the user. However, it can all be overwritten by the code above.

---

Related Topics