Estilizar Required

Question

Instead of showing that text box, I would like only the edges of my input to turn red when the user does not fill them in. there is some way to do this?

Answer 1

You can treat this with pseudo-classes :invalid, :focus, and :valid

Note that the order should be this so that the styles do not overwrite incorrectly. First he gets invalided and red until you focus on the field, then he turns blue, and if you fill something he turns green.

See the example below to better understand.

input:invalid {
    border: 2px solid red;
}
input:focus {
    border: 2px solid blue;
}
input:valid {
    border: 2px solid green;
}

<input type="text" required>

EDIT: Example of formatting without the required

As this field has no valid or invalid rule it only changes color in :Focus and when you click out it turns green, as it is always valid since there are no rules like patterns or maxlength for example...

input:focus {
    border: 2px solid blue !important;
}
input:valid {
    border: 2px solid green;
}

<input type="text">

OBS: This is a user-side only validation to give visual feedback to the user, these css styles do not serve to validate the fields in the database, are only worth improving the user experience in the interface.

Answer 2

Using Javascript you can do without using the required.

Add a class .required to the fields you want to be filled in and use the script that will check these fields in Ubmit by changing the border color of the ones that have not been filled in:

formulario.onsubmit = function(){
   var req = document.querySelectorAll(".required");
   var flag = true;
   for(var x=0; x<req.length; x++){
      if(!req[x].value){
         req[x].style.borderColor = "red";
         flag = false;
      }
   }
   
   return flag;
}

<form id="formulario">
   <p>
      <input type="text" placeholder="Preenchimento opcional">
   </p>
   <p>
      <input type="text" class="required" placeholder="Preenchimento obrigatório">
   </p>
   <button>Enviar</button>
</form>