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>
Related
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 creating a new website locally and for some reason all of my images that I have on my site when you hover over them it displays a + magnifying glass instead of the normal cursor.
The links still work but not sure why the + magnifying glass is appearing. Any help on rectifying this would be greatly appreciated.
Try adding this css
img {
cursor: default;
}
Or if that doesn't work,
img {
cursor: default !important;
}
If neither works, you have something strange in your browser over-riding normal operation. If only the second one works, you have something injecting css into your page that you are unaware of.
Sometimes I see some an unwanted border or another element in the web page and I have a lot of troubles identifying just to which element it belongs.
There may be many enclosed elements, any of which may or may not have the border in question, for example. Right now I have to go through each of them and check the border property of each, which takes a lot of effort.
So is there a way to see which element owns any given on-screen pixel with Firefox, Firebug, Chrome or any other web development tool?
I just want to point my mouse cursor at any pixel in question and see the corresponding element and/or rule.
There's usually an option to inspect any chosen element, but right-clicking on the border of an element and choosing to inspect the element doesn't seem to show the exact element the border of which was clicked.
The only way I could think of is to use the "element picker" function which exists in any developer tool.
In Chrome it is a "magnifying glass" and in Firefox a "square with an arrow" - both at the top left.
Click to activate and move the cursor around the page to inspect. The respective element is highlighted.
So you should easily find the element you are looking for.
An example:
The element inspector should do the job. The only reason I could think of for why it fails is when the element in question is covered by another element. See example:
#test-1 {
float: right;
width: 50%;
}
#test-1 >div {
border-bottom: 1px solid;
}
#test-2 {
float: left;
width: 50%;
}
#test-2 > div {
width: 200%;
}
<div id="test-1">
<div>Inspect me</div>
</div>
<div id="test-2">
<div>Obstructive element</div>
</div>
And the solution is simple: right-click on the element in question and click inspect element (zoom the page if necessary). If it is not the correct element, hit the del button on the keyboard. This removes the element you just selected. Repeat until necessary.
As far as browser functionality goes, there are two thoughts that come to mind:
The 'elements' tab of Chrome Developer Tools. If you hover over elements within the tab, that area of the page will be highlighted, complete with a height/width tooltip. (I do realize this is sort of the opposite of your use case, but it could still be useful).
Similarly, the Firefox page inspector has similar functionality.
It might be worth writing a small script to get the functionality you're looking for. You might look into jQuery's elementFromPoint. Example: http://jsfiddle.net/t8vapLwr/2/
Why don't you try this chrome extension if you don't want to rely on the element picker.
https://chrome.google.com/webstore/detail/pesticide-for-chrome/bblbgcheenepgnnajgfpiicnbbdmmooh
what it does is highlight the different elements on chrome.
I totally understand your problem. I have been thought it. So what i do is the following:
Obviously you can use the inspect tool which sometimes doesn't shows us what we exactly need.
You can use this chrome extension Precise Element Picker Tool and then select the specific element.
I am sure the 2nd option will solve your problem.
Using "Inspect Element" on a border has always worked for me, but potentially this could help.
It was mentioned by Sculper, but you could do something really quick yourself using document.elementFromPoint.
Just copy and paste this into the console:
window.addEventListener('click', function(e) {
e.preventDefault();
console.log(document.elementFromPoint(e.clientX, e.clientY));
}, true);
Then you can click around the page to find the element in question.
In Chrome, Firefox, and Firebug, that outputs the element to the console, which you can then click (or for Chrome right-click and "Reveal in Elements Panel") to see it in the Elements Panel.
If you need clicking for navigation (for a single-page app or the like), you can simply change the event being captured to mousemove or dblclick.
I know this question has been asked before, but I'm having some difficulty getting it to work in IE9. I have an html page with 3 forms in it (since each form contains a request to a different resource on a website). The html looks like this:
<form action="/SomeController1/Action" method="get"><button name="action" value="someValue">Request the first thing</button></form>
<form action="/SomeController2/Action" method="get"><button name="action" value="someValue">Request the second thing</button></form>
<form action="/SomeController3/Action" method="get"><button name="action" value="someValue">Request the third thing</button></form>
I'm trying to disable the blue glow that is showing up on all three buttons when the page loads. I think it looks really confusing...
The solution that I'm trying to implement, which doesn't seem to be working, is:
button
{
outline-width: 0px;
outline: none;
}
At any rate, the glow doesn't appear in Firefox or Chrome, it just seems to be appearing in IE. I suppose I could just use one form and put 3 buttons in it, but this seems a bit more like a workaround rather than a solution. Is there any way to do this using CSS or javascript? Any help will be appreciated!
Thanks!
Edit - Here's an image of the problem:
I was just hoping to get rid of the blue color.
You can't just get rid of it, because Internet Explorer uses the native buttons, from your system theme. Take a look at any system dialog box with a button, for example when you change your wallpaper.
You can only remove the blue inner glow if you're willing to style a decent looking button yourself, starting with setting a border/background (which disables using the native style).
with 'glow' you mean a border? in that case, just do;
button { border: 0; }
I don't have IE 9 to test---but generically in CSS, you should try
button:focus {
outline:none;
box-shadow:none;
}
Adapted from "Removing the blue glow from an HTML text input when selected".
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;
}