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;
}
Related
This is my first question on here. Any feedback is welcome.
I'm creating a dropdown menu for the mobile version of our site and I'm running into an issue that seems quite straight forward.
In this image you see the menu how it should look like when the submenu is extended. When working in the Elementor editor everything looks how it should look. When I go to preview mode or to the live website the following happens when I extend the dropdown menu: lines appear around the extended item what I think are borders or an outline. Also when I close the submenu the menu item gets highlighted: highlighted menu item.
It seems like the menu item is set to active and the default border/overlay is added. I don't see how that is possible since this are my settings: settings. Separation is set to none and the background-color and color are both set to their correct values. Settings for normal and hover are the same as active, since I don't want any changes to happen.
I tried other color values and changed them to transparent. These changes work properly but the black border and overlay remain an issue.
I also tried adding the following CSS to the element but this didn't help:
selector .menu-item {
border: none;
outline: none;
}
I tried rebuilding the menu, some other code snippets, disabling caching plugins, setting separation to solid with 0px and more but nothing fixed it so far. When looking at the elements using inspect I see that when extending the submenu the class changes from elementor-item has-submenu to elementor-item has-submenu highlighted. If I could somehow disable this I think the issue would be solved.
My HTML and CSS knowledge is quite limited so I hope there is an easy fix that I'm not familiar with.
Many thanks in advance!
Edit: Thanks to #Alivia Pramanik for the quick and easy solution!
Welcome to SO. If I am not mistaken, you can change this with Elementor's own design. To do with this custom CSS, add this,
.elementor-nav-menu--dropdown .elementor-item:focus {
background: #0000!important;
outline: 0!important;
}
See the image for your reference
For my thesis I have to make a website using the Bootstrap 5 framework, so I've been messing around with "Bootstrap Cards". When I click on a card a border appears. Thought I might fix it overwriting it using the pseudo element :focus
.card:focus {outline: 0 !important;
E.g.:
I guess it's something else then an outline, but don't have the needed knowledge of HTML
Thanks already,
Luk Ramon
Check .card class has a border
To remove it simply override it to border: none;
Try using this code:
.card:focus {
border: none !important;
}
See if it will solve the problem
Is there a way to change the blue highlight color when hovering in a drop down menu? I'm using the drop-down list on my page. I have a drop down menu that allows you to choose the topic.
I would greatly appreciate any help or feedback on this topic.
That blue colour is called an outline, and is used for accessibility reasons.
For example, when you press the tab key to move between form elements, an outline is commonly used so the user knows what element is currently selected.
You can remove this outline with the following CSS:
select:focus {
outline: none;
}
However, It is not recommended to remove this. If you must, you should provide an alternative style by using a background colour, changing the text colour, or provide a custom outline instead of the browser default.
ex:
select:focus {
outline: 2px solid red;
}
.dropdown-item.active, .dropdown-item:active {
background-color: red;
}
These are the Bootstrap classes that need to be overwritten if you wish to change the highlighted background colour when you hover over the dropdown item (i.e. when it is "active").
The classes can be discovered by opening up the Elements section within Google Dev Tools (F12) and then highlighting the element that you wish to restyle. Finding the active states of classes can be a little more tricky and may require a little more digging into the HTML.
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.
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;
}