Ayo,
I have built a contact form and every time I click on a specific input field to fill it out, it imitates a weird blue border around the input field.
I think the best way to present you the problem with code is if you visit my website - I don't know which of my 1k line in css triggers that so please take a look to the very bottom of the website https://www.adamsochorec.com/about/[ ](https://www.adamsochorec.com/about/)
I've tried to remove it by setting border: to none on :focus but that did not work and the effect isn't generally visible while I inspect the page. So I was wondering if it might be some browser preset or something? It is both on Brave and Safari browsers.
no outline before clicking in, outline after clicking in
EDIT: Outline: none worked!
It seems like an input, you can use:
input:focus{
outline: none;
}
You can replace input with textarea or anything else in your case.
I am working on a form for a company that still uses tables and they want me to add CSS to their template without changing any HTML/JS. There is a nested input(CheckBox) that should be selected when a user clicks the image. This is working fine in Chrome, Firefox, and Edge but in IE when the image is clicked it will not check the box. Below is a screen cap of the DOM and an actual choice in the browser.
I changed the background color of the font tag to distinguish it from the image and added a border around the td. I noticed 2 strange things.
When the font tag is clicked it will check the box.
When the box is checked, I am able to click the image and have the checkbox
de-selected. Once it is, I can not re-select it by clicking the image.
Any idea of what is causing this and what can be done? I am using IE 11.
It appears that IE has a bug which causes this problem. I found some helpful information from this site:
https://snook.ca/archives/javascript/using_images_as
The CSS fix was:
label img{
pointer-events: none;
}
label{
display: inline-block;
}
A few days ago I saw a 'block' icon when I put my mouse cursor over a link, indicating that I could not click. How can I do that? I do not know the correct term to search, maybe that's why I'm not finding it. Is it a plugin? An HTML5 feature?
Unfortunately I do not remember the site that I saw this on.
Thanks!
To accomplish this, use the not-allowed pointer in CSS.
Live Example (try mousing over the text):
a {
cursor: not-allowed;
}
<a>Not Allowed</a>
The goal is to have the cursor change, if the left mouse button is held down over an element, in this example a button (same behavior was observed for a canvas element as well).
Strangely, in Chrome 32.0.1700.76 the cursor does not change as expected, if the mouse button is held down in the upper area of the button, up to about 60 pixels from the top.
Note that the problem only occurs, if the button is located at the very top of the webpage.
That's why i can't show the effect on JSFiddle.
This code sample can be used to reproduce the supposed bug:
<html>
<head>
<style type="text/css">
#testButton {
cursor: pointer;
}
#testButton:active {
cursor: move;
}
</style>
</head>
<body>
<button id="testButton" style="width:200px;height:200px">click</button>
</body>
</html>
Firefox and IE switch the cursor as expected on holding the left mouse.
Can anyone confirm this misbehavior or propose a way to fix it for Chrome?
Are you emulating touch events in Chrome?
Open the settings for the inspector and in the "Overrides" section turn off "Emulate touch events".
I have this image map
http://corfro.com/projects/charlie-faye-tour-map/
And when you click on the different cities a black border shows up on the area but only happening in Chrome. (you might need to click a few times on different cities but the border will show up - once the bus arrives at the city the borders start showing up)
I've tried the following but to no avail.
a{outline:none;}
map > area,
map > area:active,
map > area:focus {outline: none; border:0; }
Do you guys have any suggestions? Any help is much appreciated as this is driving me crazy!
Old trick <area onfocus="blur(); (...) />"
Good luck;
I had a similar problem on IE9 and this worked:
#MyImageMap, #MyImage {
outline: none;
}
Original source of the idea: "One note about image maps is that you'll want to disable the border on the img, map, and area tags using CSS." http://forums.macrumors.com/showthread.php?t=1342928
(the area is a child of the map)
In the <IMG> tag add
hidefocus="true"
Try this, it worked for me ;)
a{
outline:none !important;
border: none !important;
}
This fixes it on IE
img {
outline:none;
}
Using jquery based on #boru solution:
$("area").focus(function(){
$(this).blur();
})
Have you tried adding the attribute "border: none !important" ?
just found a fix to get rid of that border in firefox 4 as the .blur does not seem to fix it.
#someWrappingElement *:active { overflow-x:hidden }
if you don't get specific to the div or element it's in it can reek havoc with your page and cause things clicked on to disappear while the mouse is held down. Use in conjuction with .blur() to fix for firefox and chrome.
Go to sharePoint Designer and locate your page/image
Highlight the image that has the randomized border
Find the following tags in the code:
<Content xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor">
</Content>
Between them Add:
style="border:none"
*may have to add them after the following: alt="" style="margin: 5px"
I'm experiencing exactly the same thing with Chrome on OS X (v 8.0.552.224). I just restarted Chrome and got an automatic upgrade on my Mac for this to start appearing, so must be something in the new release.
I have noted though that the colour of the outline can be changed by altering the "outline-color" attribute of the image, but have been unable to hide it completely even though "outline" is set to "none".
I just faced a similar problem. I couldn't get rid of the outline but was able to effectively hide it by setting the color property of the div to the background color. But I had areas of flat color. If I set color to transparent it came out black. That should be the right track to figure out a fix, though. I used it on a US map seen here: map
A really old question, but I found another solution that might help others.
I'm using the React package react-google-maps to show my Google Maps instance and markers
and used the following CSS to overwrite the user agent styles to fix this problem.
:focus {
outline: none !important;
}