Question

В Google Chrome при нажатии на кнопку "Спойлер" на форуме появляется откуда-то черная рамка, которой быть не должно

В коде ничего не менял. Не понятно откуда она взялась и как убрать

Страница с кнопками спойлеров https://eruditov.net/forum/51-4634-1

Answer 1

Прописать в стили:

input.uSpoilerButton {border:0;}

Если нужно чтобы и при наведении на кнопку не было рамки, тогда так прописать:

input.uSpoilerButton,input.uSpoilerButton:hover {border:0;}

Comments

Рамка не только у элементов input, но еще и у textarea

---

Rostislav,

У вас все рамки в стилях прописаны. По поводу textarea нужно более подробно, где именно, так как textarea много на сайте.

---

Rostislav,

Еще лучше, лучше так прописать строку стилей:

.uSpoilerButton,input.uSpoilerButton:active, input.uSpoilerButton:hover, input.uSpoilerButton:focus {border:0px!important;outline: 0;outline-offset: 0;}

рамки не будет и при наведении и при активности и при фокусировке.

---

Yuri_Geruk,

Очень странно, что эти рамки появились совсем недавно без каких-либо изменений в коде и только в браузере Google Chrome  В том же Яндекс.Браузере, Tor их нет...

---

Yuri_Geruk,

Вот https://eruditov.net/publ/smekalka/zoopark/8-1-0-1186

Похоже это проявляется только с :active

---

Rostislav,

Тогда так попробуйте:

textarea.commFl,.uSpoilerButton,input.uSpoilerButton:active, input.uSpoilerButton:hover, input.uSpoilerButton:focus {border:0px!important;outline: 0;outline-offset: 0;}

для всех полей лучше не убирать рамку так как пользователи не увидят само поле на сайте если рамки все скрыть.

---

Yuri_Geruk,

Я хочу разобраться в причине. Записал gif для наглядности. Слева Яндекс.Браузер, справа - Google Chrome

Это Chrome портачит что ли?

---

Rostislav,

1. Если у вас старая версия браузера, попробуйте ее обновить.
2. Я в том же хроме не вижу черной рамки, стильная тонкая синяя рамка.
3. О том как скрыть рамку я выше дал решение, остальное не от нас зависит, браузеры по разному отображают разные элементы сайта, обновляйте если версия браузера старая.

---

Yuri_Geruk,

Последняя версия Google Chrome уже установлена Версия 83.0.4103.61 (Официальная сборка), (32 бит)

 input:active,input:focus,textarea:active,textarea:focus {border:1px solid #8DB2E3 !important; background:#ffffff url(/.s/img/wd/1/text-bg-focus.gif) repeat-x 0 0;}

этот код вообще ничего не поменял :(

---

Rostislav,

Так советовался другой код:

textarea.commFl,.uSpoilerButton,input.uSpoilerButton:active, input.uSpoilerButton:hover, input.uSpoilerButton:focus {border:0px!important;outline: 0;outline-offset: 0;}

Если вы работаете в старой версии Windows или в другой OC, возможно еще из-за этого стиль рамки может отличаться.

---

Yuri_Geruk,

outline:none; решило проблему, спасибо!  Внезапно Chrome решил границы в черный цвет красить по дефолту, вместо синего.