Para hacer el campo requerido como en la pagina de GH se usa javascript en vez de solo poner "required" en el codigo del campo.
Te dejo un codigo para que veas y te explico:

<script type='text/javascript'>
function notEmpty(elem, helperMsg){
    if(elem.value.length == 0){
        alert(helperMsg);
        elem.focus();
        return false;
    }
    return true;
}
</script>

<!-- FIN DEL SCRIPT JS, INICIO DE FORMA-->

<form>
Required Field: <input type='text' id='required'/>
<input type='button' 
    onclick="notEmpty(document.getElementById('required'), 'Debes completar todos los campos')"
    value='Check Field' />
</form>


Es bastante facil. El codigo javascript de arriba muestra una ventana (tambien llamada "alrert" si todos los campos que tengan como id "required" estan incompletos al apretar el boton de submit.

Lo que tenes que hacer es incluir el codigo JS de arriba en tu pagina, poner en todos los campos que queres que sean requeridos:

id="required"

y agregar al boton de submit este onclick:

onclick="notEmpty(document.getElementById('required'), 'Debes completar todos los campos')"


Avisame si te sirvio

para el shadow.

http://www.taringa.net/posts/hazlo-tu-mismo/13773706/sombras-y-esquinas-redondeadas-css3.html

y el "campo requerido" lo hace con javascript... crea una funcion, donde, si los campos estan vacios da como resultado un alert()

si queres te paso, pero es mejor el que tenes con required

<script type="text/javascript">
alert('el campo nombrte es requerido');
</script>
// igual me gusta mas el tuyo