Get rid of the blue outline border when embedding Google Maps

Does anyone know how to remove the blue focus border that appears when clicking on an embedded Google Map?

I've tried various CSS styles without success:

*:focus {
    outline: none !important;
    border: none !important;
}

iframe {
    outline: none !important;
    border: none !important;
}
iframe:focus {
    outline: none !important;
    border: none !important;
    
}
#gmap_canvas:focus {
    outline: none !important;
    border: none !important;
}

.mapouter:focus {
    outline: none !important;
    border: none !important;
}

FIDDLE

cssgoogle-maps

Answer №1

I encountered a similar problem and found a solution that might work for you:

.gm-style iframe + div { border:none!important; }

It seems to be a deliberate "accessibility" feature implemented by Google.

Answer №2

https://i.sstatic.net/gWDF7.png

In my attempt to remove it using dev tools, I targeted the outer div containing the map and added 'border=none' to the style attribute.

However, the issue persists even when dragging and scrolling the map.

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

Click a button to dynamically create a div element with jQuery

Whenever I click the button to add an address, I want to dynamically create a new div structure using jQuery <div id="container"> <div class="address"> <div class="input-reg rb-item input-group"> <sp ...

javascriptjqueryhtmlcss

Content for Bootstrap carousel items can be divided into two separate divs arranged horizontally

I'm currently working with a bootstrap carousel that displays images and text on each carousel item. However, I want the content of each carousel item to be displayed horizontally, rather than vertically as shown in the image below. Here is the curre ...

htmlcsstwitter-bootstrapbootstrap-4

How can you create a unique custom border for an image and display it on another image?

I am working towards achieving a specific output similar to the one shown in this https://i.stack.imgur.com/ejiYC.png image. Currently, I have successfully created the border section. Now, my next challenge is how to overlap images and apply borders as de ...

htmlcssimageborder

CSS - Apply a captivating background to specific columns within a grid layout

Wow, I'm really struggling with CSS and this particular issue has me perplexed. I need to add background colors to specific columns but not all of them. The problem is that the padding gets messed up when I do this. Imagine having a headache while try ...

csstwitter-bootstrap

Responsive Grey Tiles for Google Maps v3

I've successfully implemented Google Maps V3 in my project, but I'm encountering an issue with grey tiles appearing on the map. I attempted to fix this problem by triggering a resize event using the following code snippet: google.maps.event.trig ...

javascriptjquerygoogle-mapsgoogle-maps-api-3

What is the method to define the maximum width for a BootstrapTable while also trimming any data that exceeds this specified width?

In my ASP.NET Web Forms project, I am utilizing Bootstrap 5.2 for a BootstrapTable, which is currently defined as follows: <table class="display table table-bordered table-striped w-100 tables" ...

cssasp.netbootstrap-5bootstrap-table

Certain browsers have difficulty running CSS keyframes animations

As I work on my website, I have integrated a CSS keyframes animation that is triggered by clicking a link connected to a JavaScript function. Here is an excerpt from my CSS file: #banner { background-color: #00BBD2; position: absolute; width: 100%; heigh ...

javascriptjqueryhtmlcssanimation

Phone website doesn't display properly on mobile device (CSS and HTML)

I am experiencing an issue where my website is not loading on mobile devices, but it functions properly when I adjust the size of my Chrome window on my laptop. @media screen { body{ background-image: url(background.jpg); backgroun ...

htmlcssmobile

Keep label at the forefront once input field is completed

Is it possible to keep my label positioned on top of the input field even after filling in data? I attempted using the valid function in CSS, but did not achieve the desired functionality. .txt_field input { width: 100%; padding: 0 5px; height: 4 ...

htmlcss

The text outside of the button is overridden by my CSS styling

I've been working on a simple card matching game and I decided to style the buttons to enhance their appearance. However, I'm facing an issue where the styling code has caused the text to appear outside of the button. Whenever I try to adjust the ...

htmlcssbuttontext

Arrange elements in a vertical layout and align them to the left when they exceed the boundaries of their container

I am seeking a solution for laying out my design, similar to the one shown in this image Essentially, I have a container with a fixed height of 300px. I want to display a list vertically with each item taking up a width of 33%. If the list becomes too lon ...

htmlcss

What is the best way to align a logo in a log-in screen?

I am having an issue with centering the logo on my login form. The "signin" text is centered perfectly, but the logo always stays at the top left corner. I don't understand why the logo is not centered. If anyone has a solution to propose, I would gre ...

css

nest <div> elements inside a "row" class using Bootstrap4

I'm looking for a way to position an element inside a row class. Check out the JS Fiddle link: https://jsfiddle.net/jLhvmq24/2/ The small tag "Enter Business Email" needs to be displayed below the input box. <div class="row"> <div class= ...

csstwitter-bootstrapbootstrap-4flexbox

How can I make the parent menu active in AngularJS when a submenu is selected?

I have set up the Menu and Submenu in the following way: <li> <a href="#/solution" ng-class="{ current: isActive('/solution') }" > <i class="halflings white home"></i> {{menu.home}} </a> < ...

cssangularjs

Node.js has no trouble loading HTML files, however, it seems to encounter issues when trying to

Having a bit of trouble with my JavaScript skills as I try to load my index.html file (seems like it should be the 5th easiest thing to do in JavaScript). Let me get straight to the point; when I manually open my index.html, it loads perfectly WITH the CS ...

javascripthtmlcssnode.js

Responsiveness of a div containing various content

I am currently working with Bootstrap 4 and my HTML code looks like this: <div class="font-weight-bold col-12"> <span>Filter :</span> <input type="text" class="form-control" /> </div> Initial ...

htmlcssbootstrap-4responsive

Utilizing data attributes instead of IDs for connecting buttons and tabs in Javascript tab navigation

I'm currently exploring a new approach to creating Javascript tabs by utilizing data attributes instead of IDs to connect the tab with its content. Here's the concept in action: When clicking on a <button class="tab" data-tab-trigger="1"> ...

javascriptjqueryhtmlcsstabs

Utilizing identical CSS for both mobile and desktop interfaces, while customizing margins and paddings separately

I am facing a problem on my website where the padding and margins appear differently on different devices. I have compared screenshots of the site on an Android device and my desktop PC: Site displayed on mobile device: Desktop view: Below is the CSS co ...

androidhtmlcssmobile

The CSS styles are not recognized by the Windows 2003 server

After deploying my webapp, which was created using asp.net, to a testing server (Windows 2003 SP2, IIS6), I encountered an issue. When I accessed the default page, none of the CSS styles were applied. Only plain text or formatting from the .aspx file was v ...

c#asp.netcss

Steps to remove a scrollbar from a fullscreen slider

Can anyone provide code examples on how to disable the scroll bar on a full screen slider? I want to have a scroll down button on each slider that, when clicked, will show the scrollbar only below the slider. I don't want the scrollbar to be visible ...

javascriptjquerycsshtmlscrollbar