CSS modificar el mensaje que sale al intentar enviar un campo vacio con required

[@XSStringManolo]

Ando haciendo una app web. En chrome (no sé otros navegadores) al pulsar por ejemplo en un input type text aparece un bordeado naranja al rededor del  campo de texto. Los estilé a azul utilizando la keyword outline en inputTypeText:focus

Cuando hago submit del campo de texto, si este está vacio, sale un mensaje diciendo que se debe completar el campo, con un símbolo de exclamación etc.
Lo que busco es como editar, remplazar o estilar este mensaje que se superpone a los elementos. Tiene detalles en naranja, entonces como mínimo quiero que quede con el mismo color que el resto de elementos de mi app/web.

Gracias!

[Leguim]

Hola!

Capaz no es lo que buscas pero para "personalizar" de mostrar un error cuando se envía un campo vacío ya sea un input, textarea, select, etcétera lo que hago es usar código de javascript y jQuery de la siguiente manera.

Código (html) [Seleccionar] Expandir


<form id="form_index" method="post">
       <input type="email" name="input_email>"
</form>


Código (javascript) [Seleccionar] Expandir


$(document).ready(function()
{
      $('#form_index').submit(function(e)
      {
     if(form_index.input_email.value == 0) // se accede a el formulario por medio de form_index la id y luego a el elemento ya sea un select, en este caso un input que tiene de name="" input_email
     {
     e.preventDefault(); // sirve para no enviar el formulario

                     form_index.input_email.focus(); // hace el foco en el input que esta vacío
                     form_index.input_email.style.border = '1px solid red'; // Marked

                    alert('no seas vago y completa los campos!');
     }
       });
});