So, whenever I click on my button, this happens:
Is there any way to prevent this?
Thanks guys. :)
Answered already (probably many times, but here's one example): https://stackoverflow.com/a/3397158/839847
Quoted here for convenience:
This border is used to show that the element is focused (i.e. you can
type in the input or press the button with Enter). You can remove it,
though:
textarea:focus, input:focus{
outline: 0;
}
You may want to add some other way for users to know what element has
keyboard focus though for usability.
Chrome will also apply highlighting to other elements such as DIV's
used as modals. To prevent the highlight on those and all other
elements as well, you can do:
*:focus {
outline: 0;
}
Think you keeping your button inside <a> tag. If so use this code
a #btnid
{
border:none;
}
panelMain.setBackground(Color.WHITE);
Button.setBackground(Color.WHITE);
Adding this to your JFrame inherited class constructor will resolve the issue. The color does not have to be white, you can set it anything, just make sure the panel and button are of the same color. and please don't trust my answer too much because I too am a beginner
To make this work for me in Chrome in 2021 I added this to my Site.css file:
.btn,
.btn:focus,
.btn:active,
.btn:hover {
border: 0 !important;
outline: 0 !important;
}
Related
I have a very limited space around the mat-radio-button element so I wanted to disable it. It is half disabled but, on hover action, it's "ghost" continues to show on hoverlike below;
This is my mat-radio-button;
<mat-radio-button [disableRipple]="true" [checked]="element == expandedElement"(change)="ShowDetail(element)" ></mat-radio-button>
And to be clear, [disableRipple] disables the effect that shows on onclick but not the effect on hover. Anybody have a solution that might help me?
This is what I've tried but doesn't work which is located at the styles.css of the component (When doing document.querySelectorAll() this gives the ghost part);
span.mat-ripple-element.mat-radio-persistent-ripple{
display: none !important;
}
Stakblitz that shows disableRipple only removes the ripple that is shown on onlick event : example (Auto is the one with disableRipple attribute)
To remove the ripple effect you can just add the following to your styles.scss file:
.mat-radio-ripple {
display: none;
}
As you can see here: https://stackblitz.com/edit/angular-ehgpd2-2hvt7s?file=src/styles.scss
This removes the ripple to the material radio buttons.
To remove it for all mat elements you can just do:
.mat-ripple { display: none; }
To remove if just for checkboxes:
.mat-checkbox-ripple { display: none; }
etc...
As you can see here: https://github.com/angular/components/issues/17404
(Also please note that as mentioned in the guthub issue the ripples on focus/click are there for accessibility, that's the reason why they're difficult to get rid of, I think you should keep that in mind and do something on a mat radio that if active or has focus)
To remove the background color on hover. Add below css in your style.css/style.scss file.
.mat-radio-container:hover .mat-radio-persistent-ripple {
opacity: 0 !important;
}
I'm new at website programming and I'm currently using Bootstrap, but I'm struggling with a problem that I just can't fix.
I have a navbar where one of the links open a modal, but when the modal closes, then there is a blue outline around the link in the navbar.
is it possible to remove this blue box? I just can't find the styling, that causes it?
That blue outline exists for accessibility. It helps people navigate through the links and tabs. Most people would recommend that you don't remove it.
You haven't posted your code (a requirement on this website), so I don't know exactly which element needs styling, but this is the code you would add to that element:
:focus {
outline: 0;
}
As Jdsfighter stated, you could also add this to your stylesheet to remove the outline from every element.
*:focus {
outline: 0;
}
Just in case someone bump into this like I did. In Bootstrap >5 it's box-shadow:
:focus {
box-shadow: none;
}
I don't really know how to write this because i have never seen a problem like this before.
If you go on this website (http://multicopterphoto.no/bolig/) Then click the image of the house. The image preview will appear. Go out of the preview. Now when you hover over the house again you will see a blue line around the circle.
I thought first it was something with the anchor tags, like text-decoration or something but it isn't.
Can you please help me fix this?
simply you must set style to the + element
a .expand .ashit{
outline: 0;
}
More info at Remove Dotted Link Borders
Here's the code:
.expand.ashit{
outline: 0;
}
Just add it to your css styles. That's it.
It's because outline appearing on :focus
ADD .overlay > a:focus {outline-style: none;} to your CSS, This will solve your problem.
I have an HTML form with a bunch of input fields (of type text and select). I am floating them such that there are two on each row. In all browsers (including IE7), everything works okay, but for some reason in IE8, whenever I click inside any of the fields or their labels, that field or a surrounding one vertically moves up or down. The position then returns to normal once I click away from the box, though then another nearby box might move. Also, not all of the textbox fields have this issue, and clicking the same textbox doesn't always cause this issue. Any ideas?
I had the exact same problem, and to fix it, I set
display:block
On the element that was jumping around and that fixed it. Hope that helps.
Problem is when you focus an input text element, your browser puts 2px border around it for focus which is shifting its position if it is contained in a tight container...
I think it is more related to having 2px border all the times. Use the same color border and your text field to have transparent borders...
Your problem is addressed on this question
StackOverflow Question when focusing an input field border 8270380
This is speculation, but since focusing in an element seems to trigger the shifting, you may have different styles applied to those focused elements. Increased margins or borders could be responsible.
Not a big deal just put:-
outline: none;
in input tags
input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
display: block;
border-radius: 5px;
outline: none;
}
if you want to have a border of your own then put
input:focus {
border: 2px solid salmon;
color: #333;
}
I think your structure conflicting with your parent structure CSS (there may possible is you using third party plugin something like jQuery UI or else) do one thing just for confirmation cut or copy your conflicting code and paste out side of you parent structure or beginning of your body tag. you find the difference.
For proper help I want to review you code.
Thnx
When I click on a link, most browsers draw a dotted box around it. It's easiest to see if the link is opened in a new window, since the original page sticks around.
Can this be stopped?
Put this in your CSS
-moz-outline: none;
outline: none;
Here's a more detailed breakdown and a related question
http://css-tricks.com/removing-the-dotted-outline/
better use:
a:active {
outline: none;
}
or
a {
outline: none;
}
it's more specific. otherwise you might suppress too many things at once. and if you care for accessibility make sure to give the users who can't use a mouse some other way of knowing which link is active or focused.
One option is to use the javascript blur function on the link after it's been clicked. The blur function removes focus off the link so it won't be drawn with that dotted box around it.
If you're using jQuery, then you could implement such a solution like this:
$(function() {
$('a').click(function() {
$(this).blur();
});
});