Change color of dotted border on button

Question

I have a problem with a button in one of my forms, when a user clicks the button, it shows this black dotted border inside it. I would like to remove this, but I don't know how. I haven't set this border in the CSS...

((For those wondering; the caption means "search"))

---

I searched some time ago, but with "dashed" instead of "dotted" and therefore found nothing. I searched with "dotted" now and found this, sorry, but is there any way to change the color of this border? (I think this only applies to firefox?)

Answer 1

That is the outline

You can change it like this:

button {
    outline: 3px dashed #f0f;
    /* or, just the colour */
    outline-color: #f0f;
}

Answer 2

That is controlled by the outline CSS property. To remove it, add the following rules (or similar) to your stylesheet:

button.search {
    outline: none;
    -moz-outline: none; /* Firefox 1.0 and earlier, if you care */
}

Answer 3

I'm sorry for not being clear about the question: This happened when it was clicked, and I had tried the outline-attribute, but the pesky Firefox wouldn't accept it. By reading a little in the other thread, I found the answer:

button::-moz-focus-inner { border: 0; }

Answer 4

As per the comments:

Are you aware that this way you can't find the button anymore by keyboard navigation?

no I wasn't, I assumed the :active-event would kick in and save my day, but it obviously didn't. Do you know any solution?

consider

onclick="this.blur();"