Ненужная граница отображается при нажатии на область содержимого в подпольной теме

Question

Я разрабатываю тему wordpress с использованием Understrap с использованием дочерней темы customstrap для livecanvas. Он использует Bootstrap 4.

Я разработал свою тему, но при щелчке области содержимого в теме появляется ненужная граница. Я проверил код в браузере с помощью инспекций, но не смог найти код, вызвавший эту проблему.

вот репозиторий understrap: https://github.com/understrap/understrap

и моя страница. php

<?php
/**
 * The template for displaying all pages
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package understrap
 */

// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;

get_header();

$container = get_theme_mod( 'understrap_container_type' );

?>

<div class="wrapper" id="page-wrapper">

    <div class="<?php echo esc_attr( $container ); ?>" id="content" tabindex="-1">

        <div class="row">

            <!-- Do the left sidebar check -->
            <?php get_template_part( 'global-templates/left-sidebar-check' ); ?>

            <main class="site-main" id="main">

                <?php
                while ( have_posts() ) {
                    the_post();
                    get_template_part( 'loop-templates/content', 'page' );


                }
                ?>

            </main><!-- #main -->

            <!-- Do the right sidebar check -->
            <?php get_template_part( 'global-templates/right-sidebar-check' ); ?>

        </div><!-- .row -->

    </div><!-- #content -->

</div><!-- #page-wrapper -->

<?php
get_footer();

Какой селектор мне нужно использовать, чтобы предотвратить эту проблему?

Вот изображение:

1 - 1-е изображение по умолчанию

2- 2-е изображение Когда я щелкнул область содержимого

Когда я щелкнул область содержимого

Когда я щелкнул область содержимого

Answer 1

Посмотрите на следующий код, где tabindex используется для доступа с клавиатуры. :focus запускается Где используется tabindex.

<div class="<?php echo esc_attr( $container ); ?>" id="content" tabindex="-1">

div, упомянутый выше, имеет идентификатор content, поэтому, если вы хотите удалить контур только из используйте следующий код CSS.

#content { outline: none !important; }.

Не используйте звездочку с :focus как *:focus, чтобы решить эту проблему, тогда это может также удалить схему из некоторых других стили.

Answer 2

Я почти уверен, что это свойство outline в CSS.

Поскольку мы не видим ваш код прямо сейчас, для отладки я бы предложил попробовать вставить это в свои стили, чтобы проверить, помогает:

* {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

Answer 3

Когда я добавляю приведенный ниже код в custom css в wordpress:

*:focus{outline: none !important;}

Он работает.

Но я не понимаю, почему это не работает, когда я добавляю его в стиль. css