When clicked on, Bootstrap creates a stylish border of blue lines around the designated

Hey there, I've noticed a strange issue that only seems to occur in Google Chrome on both desktop and mobile devices. To better illustrate the problem, I have attached a picture.

A blue line unexpectedly appears when I interact with certain sections or items in the menu (such as 'contact' or 'portfolio').

Here's a snippet of the code causing the problem:

<section class="ip_fifth_block" id="contact">
    <div class="container">
        <div class="row">
        <div class="col">
        <h1 class="ip_services_heading" style="margin-bottom:0">Kontakt</h1>
        </div>
        </div>    
        <div class="row">
        <div class="col">
        <p class="ip_heading_under">Zanechajte nám Váš odkaz, pripomienku, objednávku.</p>
        </div>
        </div>

            <div class="row">
                <div class="col">
                    <form>
                            <div class="row"> 
                                <div class="col-md-6 ip_forminfo">
                                    <input type="text" name="name" placeholder="Meno a priezvisko"><br>
                                    <input type="text" name="name" placeholder="E-mail"><br>
                                    <input type="text" name="name" placeholder="Tel. číslo"><br>
                                </div>

                                <div class="col-md-6 ip_forminfo">
                                     <textarea placeholder="Vaša správa"></textarea>

                                    <input type="submit" value="Odoslať">

                                </div>
                            </div>   

                    </form>
                </div>
            </div>


    </div>


    <div id="map"></div>


</section>

Answer №1

The reason for the visible outline on your section is due to the presence of a "tabindex" attribute that determines the tab order when the "tab" key is used for navigation, highlighting focused elements with a default browser outline. To remove this outline, simply set the outline value to "none".

[tabindex] {
  outline: none;
}
<p tabindex="1">foobar</p>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a dynamic visual experience with Angular 2: How to implement multiple font colors

I have a text area which is connected to one string, with the default text color set to white. <textarea style="background-color: black;color:#fff;" [(ngModel)]="outputText"></textarea> The connected string contains multiple variables. retur ...

Issue arising with hover animation on a stable colored background

I recently created my own website and utilized this codepen https://codepen.io/nikolamitic/pen/vpNoNq to incorporate an animation effect on my name. While it works well overall, I encountered an issue when trying to decrease the line-height of my elements ...

Button-controlled automated presentation

I have devised a method to create an automatic slideshow using JavaScript. However, I am looking to incorporate manual control buttons as well. After adding manual control code, the slideshow seems to be malfunctioning. The provided code below is used for ...

Is Bootstrap CSS cached by Chrome?

As I began a new project, I decided to tweak the color settings in bootstrap. During debugging in Visual Studio, everything appeared as intended. However, after publishing the site for the first time on a server, I noticed that the color change I made in ...

Center the list items vertically within a div by using the class list-inline

Struggling to vertically center the unordered list '.header-top-widget' within a div. Despite trying several methods, I can't seem to get it centered. My attempts so far include: .header-top-widget { display:flex; align-items:center; } ...

Guide on manipulating the CSS class of an external library component within our custom component in Angular

My component includes an external library component, and I need to toggle one of the classes in the external component based on a condition in my own component. Since I cannot use ngClass for this purpose, I am hesitant to utilize document.querySelector. ...

Error: Unable to set attribute because the property is undefined in the onLoad function

Can anyone help troubleshoot this error? List of included files: <link rel="stylesheet" href="../../node_modules/semantic-ui/dist/semantic.min.css"> <link rel="stylesheet" href="../../node_modules/font-awesome/css/font-awesome.min.css"> <l ...

Effortless navigation through the document in both directions with seamless scrolling

To achieve a specific scrolling behavior on my webpage, I implemented the following function. Here is the code snippet: $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $("html, body").animate({scrollTop: 700}, 500); re ...

Troubleshooting a CSS problem on a table filled with images - See attached screenshots for

I've been working on a project involving my phpmyadmin database generating a series of 6 images on my website. I've placed them in a table, but now I'm facing some challenges - even though it seemed simple at first! The goal is to display t ...

css element remains stationary and in view

Issue at hand: I have created a logo file named .art-obj1631017189 and I am looking to fix its position. It appears to work fine, but when scrolling down and it encounters the content section, my object falls behind the content (item-layout). I desire to ...

Guide to repairing a CSS ball animation

I am attempting to create a simulation where a ball moves in the following pattern: bottom right -> top center -> bottom (/) left. However, my animation seems to be moving from top right -> bottom center -> top left (/). #stage { height:300 ...

Aligning an Image Dynamically Inserted with JavaScript

I'm having trouble centering an image added via Javascript within a table using my embedded CSS. Can someone guide me on how to adjust the CSS to center the image in the table? I've tried setting the margin property to auto for the image, but it& ...

Efficiently refine your search using the combination of checkboxes and dropdown menus simultaneously

I am currently in the process of creating a highly sortable and filterable image gallery that utilizes numerous tags. The inspiration for this project stems from a similar question on Stack Overflow regarding dropdown menus and checkboxes. You can view the ...

As you minimize the browser window, you may notice a white space appearing when scrolling over

Encountering an issue with my webpage where, upon minimizing the browser horizontally and causing overflow, scrolling over to view the hidden section results in a blank page. Any idea why this is happening? I have set my divs to a specific height (e.g. 9 ...

jQuery animation for expanding accordion headers

I want to create a cool animation for my accordion headers that mimics a ribbon being dragged onto the wrapper when hovered over, and then dragged out when the hover ends. Everything was working fine in this initial jsFiddle, but as soon as I tried to ani ...

What element is lacking in this Bootstrap 4.5 and Scroll Spy demonstration?

What could be causing this HTML snippet to malfunction? The Scroll Spy feature remains inactive. <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid ...

The output produced by ASP.NET remains unaffected by JQuery or JavaScript interference

I am facing an issue with manipulating a dynamically generated directory tree in HTML format using JavaScript. I have a piece of code that generates the tree server-side in ASP.NET and then tries to add a '+' at the end of each list item using jQ ...

Discover the method to adjust the position of elements, such as images, using radio buttons

I have an image positioned in a container along with 3 radio buttons. I want to make additional images appear over the main image when specific radio buttons are selected. Each button will trigger different positions for the additional images. So far, thi ...

Looking to effortlessly move and arrange items with ng2-drag-drop in Angular 2?

I have encountered a problem with the ng2-drag-drop library. I am trying to drag and drop items from one div to another, and then freely move the dropped item within the droppable area. One issue I'm facing is that when I drop my draggable item in th ...

Enhance your Vue.js app with seamless page transitions using the

I am facing an issue and need some help. My goal is to create a web application-like interface. However, when I use vue.js transitions, it displays like this: https://i.sstatic.net/U1g6M.gif The transition automatically resizes, repeats, and changes si ...