Question

I want to do a border with css like this

what I have for now is something like this:

input,textarea,select {
    font-weight: 400 !important;
    font-family: Monaco !important;
}

input:focus,textarea:focus,select:focus,checkbox:focus,input[type=checkbox]:focus
    {
    border: 2px solid #8aade1;
    -webkit-box-shadow: 0 0 3px #8aade1;

    -moz-box-shadow: 0 0 3px #8aade1;
    -o-box-shadow: 0 0 3px #8aade1;
    box-shadow: 0 0 3px #8aade1;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;


    outline: none;
}

/* Desativar borda zuada no firefox */
input::-moz-focus-inner,button::-moz-focus-inner {
    border: 0;
}​

http://jsfiddle.net/tNPmT/
Is there a way to make it more similar?

Answer 1

This will work on some browsers…but not all. And it won’t work on select elements in FF or IE. (I know. I tried it a week ago.) I know that Google does something similar, but when I tried looking at their code, they actually have the appearance of select elements, but they’re not really that. I wussed out and just went with a simple outline instead of trying to get the exact same box-shadow.

Not what you want to hear, I know…but that’s my experience.