Jak usunąć obramowanie konturu z przycisku wprowadzania

po kliknięciu w innym miejscu obramowanie znika, próbowałem nie skupić się, ale nie pomogło, jak sprawić, by brzydka ramka przycisku zniknęła po kliknięciu?

input[type="button"] {
  width: 120px;
  height: 60px;
  margin-left: 35px;
  display: block;
  background-color: gray;
  color: white;
  border: none;
}

<input type="button" value="Example Button">

przy użyciu konturu: brak; możemy usunąć tę granicę w chrome

<style>
input[type="button"]
{
    width:120px;
    height:60px;
    margin-left:35px;
    display:block;
    background-color:gray;
    color:white;
    border: none;
    outline:none;
}
</style>

Wyostrz kontury w Chrome i FF

oddalony:

input[type="button"]{
   outline:none;
}
input[type="button"]::-moz-focus-inner {
   border: 0;
}

Próbny

Dostępność (A11Y)

/* Don't forget! User accessibility is important */
input[type="button"]:focus {
  /* your custom focused styles here */
}

U mnie to działa po prostu :)

*:focus {
    outline: 0 !important;
}

Ten pracował dla mnie

button:focus {
    border: none;
    outline: none;
}

outlineObiekt jest to, czego potrzebujesz. Skrótem jest ustawienie każdej z poniższych właściwości w jednej deklaracji:

• outline-style
• outline-width
• outline-color

Możesz użyć outline: none;, co sugeruje zaakceptowana odpowiedź. Możesz też podać bardziej szczegółowe informacje, jeśli chcesz:

button {
    outline-style: none;
}

button:focus{outline:none !important;}

dodaj, !importantjeśli jest używany w Bootstrap

Ustaw właściwości outlinei box-shadowwłaściwości przycisku na nonei nadaj im znaczenie .

input[type="button"] {
    outline: none !important;
    box-shadow: none !important;
} 

Powodem ustawienia wartości na ważne jest to, że jeśli używasz innych bibliotek CSS lub struktur, takich jak Bootstrap, może zostać zastąpiony.

Aby uniknąć problemu spowodowanego zmianą właściwości konturu na fokusie, należy nadać efekt wizualny, gdy użytkownik kliknie przycisk wprowadzania danych lub kliknie go.

W tym przypadku jest to typ przesyłania, ale możesz zastosować również do przycisku type = ".

input[type="submit"]:focus {
    outline: none !important;
    background-color: rgb(208, 192, 74);
}

To znacznie proste, niż myślisz. Gdy przycisk jest skoncentrowany, zastosuj outlinewłaściwość, na przykład:

button:focus {
    outline: 0 !important;
}

Ale kiedy używam nonewartości, to na mnie nie działa.

Usunięcie zdarzenia dostępnego w nessorry nie jest dobrym pomysłem w standardowych programach WWW. tak czy inaczej, jeśli szukasz rozwiązania, usunięcie tylko konturu nie rozwiąże problemu. musisz także usunąć niebieski cień koloru. w określonych scenariuszach użyj oddzielnej nazwy klasy, aby wyodrębnić ten specjalny styl dla swojego przycisku.

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}

Lepiej to zrób

.remove-border.focus, .remove-border:focus {
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
 }

Usunięcie konturu to koszmar dostępności. Osoby korzystające z klawiatury nigdy nie dowiedzą się, na jakim elemencie się znajdują.

Najlepiej go zostawić, ponieważ większość klikniętych przycisków i tak gdzieś zaprowadzi, lub jeśli MUSISZ usunąć kontur, wyodrębnij z niego określoną nazwę klasy.

.no-outline {
  outline: none;
}

Następnie możesz ubiegać się o tę klasę, kiedy tylko zajdzie taka potrzeba.

Biorąc pod uwagę poniższy kod HTML:

<button class="btn-without-border"> Submit </button>

W stylu css wykonaj następujące czynności:

.btn-without-border:focus {
    border: none;
    outline: none;
}

Ten kod usunie obramowanie przycisku i wyłączy fokus na obramowaniu przycisku po kliknięciu przycisku.

Jak wielu innych wspomniało, selector:focus {outline: none;}usunie to obramowanie, ale to obramowanie jest kluczową funkcją ułatwień dostępu, która pozwala użytkownikom klawiatury znaleźć przycisk i nie powinno być usuwane.

Ponieważ twoja troska wydaje się być estetyczna, powinieneś wiedzieć, że możesz zmienić kolor, styl i szerokość konturu, dzięki czemu lepiej dopasuje się on do stylizacji Twojej witryny.

selector:focus {
  outline-width: 1px;
  outline-style: dashed;
  outline-color: red;
}

Stenografia:

selector:focus {
  outline: 1px dashed red;
}