How do I change a div's border color if the input field contained with it is not empty?

Question

I'm creating a form using only html and css. I want each question on the form to have a visual aid by giving it's containing div a red border-left color that changes to green if the input field is filled in.

This is my html:

<div class="form-unit">
  <label for="name" id="name-label"><b>Name</b></label>
  <input type="text" id="name" placeholder="Please enter your full name" required>
</div>

And this is the relevant css:

.form-unit {
  margin: 40px 0;
  padding-left: 15px;
  border-left: 3px solid rgb(200, 80, 100);
}

I want to change the color of the div's border like so:

.form-unit:??? {
  border-left: 3px solid rgb(160, 200, 80);
}

What is the syntax to target the div when the input[type="text"] is not empty? Is it at all possible with just html and css?

There is no way to target the div as its a prent element, and CSS does not provide an ancestor selector (this would hugely complicate CSS). So its not directly possible. Can I also advice you it might be better to replace the `div ` with the `label` as a wrapper? Then your inputs dont need IDs, and your labels don't need `for`, and you inherit some possibilites with the `label` element I think. Just a suggestion. But what you want is not possible in pure CSS. — somethinghere, Nov 15 '20 at 18:29

G-Cyrillus · Answer 1 · 2020-11-15T19:31:26.460

there is no parent selector yet, you have to think it otherwise :

you could use a sibbling selector with an empty tag

.form-unit {
  margin: 40px 0;
  padding-left: 15px;
  position: relative;
  border-left: 3px solid rgb(160, 200, 80);
}

input:invalid+b {
  position: absolute;
  top: 0;
  left: -3px;
  bottom: 0;
  border-left: 3px solid rgb(200, 80, 100);
}

<div class="form-unit">
  <label for="name" id="name-label"><b>Name</b></label>
  <input type="text" id="name" placeholder="Please enter your full name" required>
  <b></b>
</div>

score 0 · Answer 2 · answered Nov 15 '20 at 19:05

You can sort of do what you're looking for using the valid pseudo command in CSS. You can have the box highlight if there's text inside. Take a look at this:

input {
  font: inherit;
  padding: 0.25em 0.5em;
  border: 0.125em solid rgb(200, 80, 100); 
  outline: none;
}

input:valid{
  border-color: rgb(160, 200, 80);
}

<div class="form-unit">
  <label for="name" id="name-label"><b>Name</b></label>
  <input type="text" id="name" placeholder="Please enter your full name" required>
  <span></span>
</div>

And just for fun, you can add a checkmark or and X after the box. like this:

input {
  font: inherit;
  padding: 0.25em 0.5em;
  border: 0.125em solid rgb(200, 80, 100); 
  outline: none;
}

input:valid{
  border-color: rgb(160, 200, 80);
}

input:invalid + span::before {
  content: '✖';
  color: red;
}

input:valid + span::before {
  content: '✓';
  color: green;
}

<div class="form-unit">

  <label for="name" id="name-label"><b>Name</b></label>

  <input type="text" id="name" placeholder="Please enter your full name" required>
      <span></span>
</div>

score 0 · Answer 3 · answered Nov 15 '20 at 19:29

You can do it like this using the a span along with a valid psuedo command. Check it out!

input:invalid + span::before {
  content: '';
  margin: 40px 0;
  padding-left: 15px;
  border-left: 3px solid rgb(200, 80, 100);
}

input:valid + span::before {
  content: '';
  margin: 40px 0;
  padding-left: 15px;
  border-left: 3px solid rgb(160, 200, 80);
}

span {
  float:left;
}

<div class="form-unit">

  <label for="name" id="name-label"><b>Name</b></label>

  <input type="text" id="name" placeholder="Please enter your full name" required>
      <span></span>
</div>

How do I change a div's border color if the input field contained with it is not empty?

3 Answers3