Search code examples
htmlcsscontact-form

Is it possible to style the text font that the user input in a contactform


I ask this because the text that the user inputs in the textarea is different from the another fields. The font style is different. How can I change to font style of this field area? First of all I want to fix that and after that if styling is possible I want to learn how.

.contact-form {
  background-color: white;
}

input,
select,
textarea {
  background-color: #f2f2f2;
  display: block;
  margin: auto;
  font-size: 1em;
  padding: 25px;
  border: none;
  outline: none;
  margin-top: 20px;
  margin-bottom: 16px;
  box-sizing: border-box;
  resize: vertical;
}

input[type=submit] {
  font-family: avenir_nextdemi_bold;
  background-color: #437bff;
  font-size: 1.2em;
  color: white;
  padding: 12px 20px;
  border-radius: 30px;
  width: 15%;
  border: none;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #133edb;
}

 ::placeholder {
  font-family: avenir_nextdemi_bold;
}

textarea {
  height: 200px;
}
<form action="/action_page.php">
  <input type="text" id="lname" name="lastname" placeholder="Naam" required>
  <input type="email" id="email" name="email" placeholder="Email adres" required>
  <textarea id="subject" name="subject" placeholder="Vertel ons over je project" required></textarea>
  <input type="submit" value="Submit">
</form>


Solution

  • All you need to do is add font-family: sans-serif; Here is how it would look in the code:

    input,
    select,
    textarea {
      background-color: #f2f2f2;
      display: block;
      margin: auto;
      font-size: 1em;
      padding: 25px;
      border: none;
      outline: none;
      margin-top: 20px;
      margin-bottom: 16px;
      box-sizing: border-box;
      resize: vertical;
      font-family: sans-serif;
      /* You can change the font if you want but based on what I saw I assumed
      you wanted sans-serif. It would also be helpful for you to specify what you mean
      style text */
    }