Stylize Required

Using JavaScript you can do without using required .

Add a .required class to the fields you want to be filled in and use the script that will check those fields in the submit, changing the border color of those that have not been filled:

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>

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

Note that the order must be the order for the styles to not overwrite incorrectly. First it becomes invalid and red until you focus on the field, there it turns blue, and in case you fill in something it turns green.

See the example below for a better understanding.

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

<input type="text" required>

EDIT: Formatting example without required

Since this field has not been valid or invalid, it only changes color in: focus and when you click it it turns green because it is always valid since it does not have 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 are not valid for the fields in the database, they are only worth improving the user experience in the interface.