JavaScript não funciona para usar focus em todos inputs

Programação
#1

Estou com um problema, eu coloquei um focus e um blur pra quando clicar em campo usando js mas só funciona no primeiro campo o resto parece que não atribui sei lá preciso de ajuda desde já agradeço.

Codigo do form:

        </fieldset>

        <fieldset><input type="email"  placeholder="Digite seu email" name="email_aluno" required class="input-form"></fieldset>

        <fieldset><input type="text" class="input-form" placeholder="Digite o codigo da sua turma" name="codigo_turma" required></fieldset>

No javascritp

<script>

  var input_form = document.querySelector("input.input-form");

  input_form.addEventListener('focus', ()=>{

    input_form.style.borderBottomColor = "red";

    

  });

  input_form.addEventListener('blur', function(){

    input_form.style.borderBottomColor = "blue";

  });

</script>
#2

Olá amigo, veja se o código abaixo te ajuda:

<form>
    <fieldset>
      <input type="email"  placeholder="Digite seu email" name="email_aluno" required class="input-form">
    </fieldset>

    <fieldset>
      <input type="text" class="input-form" placeholder="Digite o codigo da sua turma" name="codigo_turma" required>           </fieldset>
  </form>

// Utilize o querySelectorAll para pegar mais de um elemento
const input_form = document.querySelectorAll(".input-form");

input_form.forEach((item) => {
  item.addEventListener('focus', function() {
    // o this faz referência ao item
    this.style.borderBottomColor = "red";
  })
  
  item.addEventListener('blur', function() {
    this.style.borderTopColor = "blue";
  })
});

Referências


#3

Vlw meu patrão, agr sim!