С помощью фрагмента кода CSS Styling

Question

Мне нужна помощь в оформлении формы. Я использую платформу Growsurf, и они предоставляют следующий фрагмент кода:

<form action="https://growsurf.com/c/sfn4xx" method="POST" class="growsurf-button blue"> 
<input type="email" name="email" placeholder="Email (required)" required> 
<input type="text" name="name" placeholder="Full Name"> 
<input type="submit" value="Join Our Referral Program"> 
</form> 

Мне нужна помощь в обновлении стиля, но у меня нет большого опыта программирования. Когда форма разворачивается на моем сайте, некоторые шрифты становятся такими маленькими, что вы едва можете их прочитать. Итак, просто нужно знать, как добавить код стиля для изменения шрифта.

Спасибо, заранее!

Answer 1

Это увеличит размер шрифта для всех входных данных в форме:

.growsurf-font-lg input {
  font-size: 16px;
}

И обновите html до следующего, чтобы убедиться, что только формы с классом growsurf-font-lg имеют увеличенный размер шрифта:

<form action="https://growsurf.com/c/sfn4xx" method="POST" class="growsurf-button blue growsurf-font-lg"> 
  <input type="email" name="email" placeholder="Email (required)" required> 
  <input type="text" name="name" placeholder="Full Name"> 
  <input type="submit" value="Join Our Referral Program"> 
</form> 

Если у вас нет таблицы стилей для добавления, вы всегда можете просто использовать теги стиля следующим образом:

<style type="text/css">
  .growsurf-font-lg input {
    font-size: 16px;
  }
</style>

<form action="https://growsurf.com/c/sfn4xx" method="POST" class="growsurf-button blue growsurf-font-lg"> 
  <input type="email" name="email" placeholder="Email (required)" required> 
  <input type="text" name="name" placeholder="Full Name"> 
  <input type="submit" value="Join Our Referral Program"> 
</form> 

Answer 2

Таким образом, чтобы получить класс из вашей формы для стиля, используйте ., а затем имя класса growsurf-button в таблице стилей.

это будет выглядеть примерно так для изменения размера шрифта, но вы можете сделать это как угодно:)

.growsurf-button {
     font-size: 15px;
}