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?)
That is the outline
You can change it like this:
button {
outline: 3px dashed #f0f;
/* or, just the colour */
outline-color: #f0f;
}
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 */
}
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; }
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();"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.