In Safari when clicking on these buttons I get this blue outline. How can I remove it?
I tried a {outline: none;} but it does not work.
Thank you in advance!
I have taken one example from w3school similar to yours this when I click on the button it looks similar to your button like below
To remove this outline you have to do below
Inspect the browser developer tools.
Please right-click on your button and select inspect to get select your element in the DOM.
And select the below steps from the Image in sequence.
Then unselect this class below in the Image to remove the outline
and Then also problem not solve then please show image of you inspect DOM options
Related
Here's the website I'm working on: http://104.193.173.104/modx/
The top navigation has 2nd and 3rd levels that are generated by Wayfinder in ModX. As far as I can tell from the page source and chrome inspector, they are generating properly and have the appropriate CSS classes. When I click one of the nav links, the inspector shows the li class change to "dropdown open" and a ul class "dropdown-menu" appears. I can see the outline in inspector, but nothing is showing on the page.
I'm guessing this is a z-index problem in my CSS, but I'm not very familiar with how all of that works. Is anyone able to help me? Let me know what HTML/CSS you need me to include and I'll edit this post. Cheers!
note: My jQuery is called in the head of each page
Your navigation div (#main-navigation-container) has overflow:hidden. You'll need to figure out what you want to do there but that's why it's being "cropped" out.
take look at this:
http://www.templatemonster.com/demo/35403.html
In this template you can click on the image under the man's forearm even over the forearm itself.
The hand is not a part of images. It is three div pieces that has a png image as background.
How is it possible?
How Can I do the same thing (have a div that contains a linked image and have another div on it but the underlying link be clickable)?
Is it cross-browser?
Thanks
You could just add pointer-events:none in your stylesheet to the element you're trying to click through
Example here: http://robertnyman.com/css3/pointer-events/pointer-events.html
Check the checkbox to see how the grey box is able to be clicked through.
it's made with
pointer-events:none;
it don't works in IE and Opera, but that is in this case not really a problem. It just don't work over the arm itself.
In modern browsers you can use the pointer-events css3 property. Here is a famous question about this : Click through a DIV to underlying elements
So I've got a standard dropdown menu in my HTML. I've also got the background colored, and I have a background image that I want to use as a button.
But there's a problem, because I can't get the default button to disappear in Firefox. Even though I can get the button to disappear in Webkit using -webkit-appearance:none; I can't get it to go away in Firefox.
Here's an example: http://jsfiddle.net/wG7UB/
And I'd prefer not to revert to a heavily styled unordered list if at all possible. Thanks!
What do you exactly want to do?I'm not sure i understand fully what exactly you're trying to do
if you want to make it disappear then you can use "{display: none}"
or you can use "-moz-appearance" property if there is any.
Here I go answering my own question... I just wrapped my select tag with a div, and used a pseudo element to cover up the button. Slightly hackish, and I don't like using the pointless div, but I guess it works okay. Then I set the CSS of the pseudo element to pointer-events:none; so that it would allow clicks through the image.
Example: http://jsfiddle.net/howlermiller/nchUt/1/
When I'm debugging a site, sometimes the hovered selectors are a little long winded and similar to other ones, is there a way to apply a kind of "sticky" state to hover rules in Firebug?
Example; I hover over a nav bar and want to copy the selector out of firebug to search in the CSS, but as soon as I move my mouse, the selector (obviously) disappears as the nav <li> isn't hovered anymore.
Any way to do this?
Thanks :)
When inspecting links, Firebug shows the default CSS state, i.e. styles applied to a:link. By default, the :hover and :active styles are not shown. Fortunately, you can change the state of the link by clicking Style and choosing the appropriate option:
For what I wanted, there's an option for it in the Style dropdown above the CSS styles for the element. Just click the dropdown, and select :active or :hover and it keeps the styles for the selected and hovered element :)
Sometimes items are not affected by the ":hover" state but by a mouseover in jQuery or similar, in that case you can manualy trigger the event (or force the event) in the console tab by writing:
$('#a-random-selector').mouseover()
Hope it helps, I came here looking for this answer but had to figure it out myself
You can try using Chrome inspector, and trigger :active :visited state etc.. on the element under styles.
Open both firebug and web developer->Inspector. In the Inspector window, locate the code line where the hover starts, right click the mouse and choose the :hover. Then the hover state will stay, you can do whatever you want in firebug.
I've found a very strange thing.
I was complaining about it before, but nobody sees old questions here.
Here's an example.
It works perfectly in Opera only... In Firefox, Chorme, Safari and IE8 there's a border around this button... And I have no idea WHY? How to delete the border?
Thanks.
Thats because you have set a type of image and not defined an image url... you have set the background image using CSS.
Change your element to a span or such and this will fix the issue, also add cursor to be a pointer in css too, this will give the user the idea to click it.
then use an onclick event for the submit.
As others have noted, you have defined an "image"-style button but not provided a source URL, resulting in a broken image.
The simplest solution is to change type="image" to type="button", which removes the broken image icon and border.