What CSS selector affects border of not filled required input?

Question

I'm trying to create a form that only uses inputs/textarea w/ border-bottom, but when left empty when using required in my syntax it gives an ugly red border around all four sides of the inputs/textarea.

input, textarea {
   background-color: inherit;
   border: 0;
   border-bottom: 2px solid $primary-color;
   color: #fff;
   font-size: 1.2em;
   line-height: 2.5;
   margin-right: 25px;
   width: 25%;
}

input:last-child {
   margin-right: 0;
   margin-left: 25px;
}

input::placeholder, textarea::placeholder {
   color: #fff;
}

textarea {
   font-family: $font-family-sans-serif;
   margin: 30px 25px;
   resize: none;
   width: 55%;
}

<input type="text" name="name" placeholder="Full Name" required>
<input type="email" name="email" placeholder="E-Mail" required>
<textarea name="message" cols"30" rows="5" placeholder="Message" required></textarea>

I've tried selectors like :empty / :invalid / :required Empty doesn't seem to work. Invalid doesn't seem to work. I realized required selects all required fields and does that styling so, obviously that won't work.

What CSS selector am I looking for?

Example of what I'm referring to: Red Box, What selector to target

See this [question](https://stackoverflow.com/questions/14895141/required-input-field-gets-border-when-value-is-empty-and-color-is-styled) — Alan Larimer, Feb 18 '18 at 00:02
Possible duplicate of [Required input field gets border when value is empty and color is styled](https://stackoverflow.com/questions/14895141/required-input-field-gets-border-when-value-is-empty-and-color-is-styled) — Heretic Monkey, Feb 18 '18 at 00:02

Facundo Corradini · Accepted Answer · 2018-02-17T23:43:16.980

I guess you're using firefox, which has a default red box-shadow for invalid elements.

You can get rid of it by applying

input:required:invalid, input:focus:invalid {
  -moz-box-shadow: none;
}

Full example bellow, be careful there, I've replaced your variables for static values

input:required:invalid, input:focus:invalid {
  -moz-box-shadow: none;
}

input, textarea {
   background-color: inherit;
   border: 0;
   border-bottom: 2px solid blue;
   color: black;
   font-size: 1.2em;
   line-height: 2.5;
   margin-right: 25px;
   width: 25%;
}

input:last-child {
   margin-right: 0;
   margin-left: 25px;
}

input::placeholder, textarea::placeholder {
   color: grey;
}

textarea {
   font-family: sans-serif;
   margin: 30px 25px;
   resize: none;
   width: 55%;
}

<input type="text" name="name" placeholder="Full Name" required>
<input type="email" name="email" placeholder="E-Mail" required>
<textarea name="message" cols"30" rows="5" placeholder="Message" required></textarea>

What CSS selector affects border of not filled required input?

1 Answers1