как сделать элемент, который требуется (в html), не отображаются обязательными (в css)

Question

Поэтому я хотел бы, чтобы требуемый элемент HTML (красного цвета) имел вид ненужного элемента (серого цвета), пока не будет нажата кнопка отправки. Как только кнопка отправки нажата, она должна появиться как обязательный элемент.

Надеюсь, это не расплывчато.

Позвольте мне попытаться лучше объяснить, что я преследую. Сейчас у меня есть обязательные поля ввода, все время являющиеся цветным персиком, из-за требуемого эффекта. То, что я хотел бы сделать, это персиковый цвет, который появляется только на необходимых элементах ввода, когда нажата кнопка отправки.

Так в принципе, как я могу изменить схему ввода на разных этапах, чтобы быть действительным и недействительным? Нужно ли мне использовать JavaScript для этого или есть более простое решение? pleeeeeaseeeee помочь meeeeeee .... это сводит меня с ума.

.form_text_input
{

  display: inline-flex;
  width: 95%;
  padding: 8px;
  font-family: inherit;
  font-size: 11pt;

}

.form_text_input:required:invalid
{

  outline-width: 1px;
  outline-style: solid;
  outline-color: #ffbda6;

}

<label class = "form_text_label">
      First Name: 
    </label>
    <input class = "form_text_input" type = "text" placeholder = "Your first   name...">
    <label class = "form_text_label">
     Last Name: * 
    </label>
    <input class = "form_text_input" type = "text" placeholder = "Your last name..." required>
    <label class = "form_text_label">
    Message: *
    </label>
    <textarea class = "form_text_input" placeholder = "Your message here..." required></textarea>
    <button class = "form_text_submit" type = "submit">
     Send &#9656;
    </button>

Если посмотреть на код, я хочу, чтобы требуемый элемент ввода "message" или "фамилия" отображался как элемент ввода "name", пока не будет нажата кнопка отправки.

Большое спасибо за вашу помощь, и я прошу прощения, если это глупый вопрос.

Answer 1

Селектор псевдокласса :required позволяет выбрать элемент с требуемым атрибутом.

Итак, просто удалите часть .form_text_input:required:invalid из своего CSS:

.form_text_input
{
    display: inline-flex;
    width: 95%;
    padding: 8px;
    font-family: inherit;
    font-size: 11pt;
}
/* REMOVE THIS PART
.form_text_input:required:invalid
{
    outline-width: 1px;
    outline-style: solid;
    outline-color: #ffbda6;
}*/

<label class = "form_text_label">First Name:</label>
<input class = "form_text_input" type = "text" placeholder = "Your first   name...">
<label class = "form_text_label">Last Name: *</label>
<input class = "form_text_input" type = "text" placeholder = "Your last name..." required>
<label class = "form_text_label">Message: *</label>
<textarea class = "form_text_input" placeholder = "Your message here..." required></textarea>
<button class = "form_text_submit" type = "submit">Send &#9656;</button>