Плавающие метки Bootstrap 5.3 ведут себя странно в моем Google Chrome (версия 123.0.6312.86 (официальная сборка) (64-разрядная версия))
Недавно я заметил странное поведение плавающих меток BS 5.3. Каким-то образом заполнитель также отображается под текстом метки, чего не должно быть.
Плавающие метки в моем Google Chrome отображаются следующим образом:
И вот так в Firefox или Microsoft Edge:
Я искал в Google, но не нашел много информации об этом, думаю, может быть, это просто произошло на моем компьютере?
Кто-нибудь знает, что здесь произошло и как это исправить? Любое предложение будет оценено по достоинству.
ПЛЮС:
На моем компьютере установлена 23H2,64-разрядная операционная система Windows 11 Pro, процессор x64;
Мой Google Chrome (версия 123.0.6312.86 (официальная сборка) (64-разрядная версия))
БС:
Вот как это выглядит после того, как я включил «Показать теневой DOM пользовательского агента»:
@RichDeBourke, спасибо за ответ, я попробовал переключить Chrome в светлый или темный режим, заполнитель остался. И вы можете заметить, что скриншоты я взял с официального сайта документации BS, это моя демо :-).
В файле bootstrap.min.css есть определение стиля .form-floating>.form-control::placeholder{color:transparent}, которое должно скрывать текст-заполнитель. Стиль взят из файла _floating-labels.scss. В Chrome вам необходимо настроить инструменты разработчика для отображения псевдоэлементов. После этого вы сможете увидеть, есть ли color:transparent в списке. Я просмотрел страницу Bootstrap с последней версией Chrome (123.0.6312.106), и она работает правильно.
@RichDeBourke, возможно, именно поэтому на моем компьютере он ведет себя странно, я не смог найти это: .form-floating>.form-control::placeholder{color:transparent} на странице DevTools. Итак, как настроить инструменты разработчика для точного отображения псевдоэлементов?
В Инструментах разработчика в Chrome (или Edge) откройте «Настройки», прокрутите вниз до пункта «Показать теневой DOM пользовательского агента» и включите его. После этого вы сможете увидеть стили, которые применяются к вводу. Этот ответ stackoverflow.com/a/26853319/1011984 старый, но содержит общую информацию.
@RichDeBourke, спасибо за инструкцию, теперь у меня включен параметр «Показать теневой DOM пользовательского агента» и я увидел контент #shadow-root. но цвет: прозрачный; был перезаписан ::placeholder {color:#828585 !important}, посмотрите скриншот, который я только что загрузил в исходное сообщение.
На вашем снимке экрана не показаны источники стилей CSS (обычно в крайнем правом углу находится ссылка на источник стиля — вы запечатлели только часть экрана?). Каким бы ни был источник color:#828585, вы видите текст-заполнитель, и это ненормально. Посмотрите, сможете ли вы определить, откуда исходит этот стиль, и устранить его. Если вам нужна дополнительная помощь, опубликуйте свое обновление: chat.stackoverflow.com/rooms/257349/… .
Ответы 1
Поскольку @Rich DeBourke продолжает помогать, я наконец обнаружил проблему, вызванную одним из расширений Chrome, под названием (ProWritingAid for Chrome). Спасибо, @Rich Debourke!
Если вы переключите Chrome или Firefox в облегченный режим, увидите ли вы заполнитель за меткой? И можете ли вы создать рабочий фрагмент кода со своими стилями, демонстрирующий вашу проблему?