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
Related
I'm working with Bootstrap 4, and for the <select> elements i want to use Select2.
The problem is that it does not have a official Bootstrap 4 template, so i was looking and i found this project, which is awesome.
But i having one issue with is-invalid class.
When i use it, the <select> borders change to red when the page loads and then return to its normal state
I try to make a simple class to use with the same Bootstrap color like
.invalid-select2 {
border-color: #dc3545;
}
.invalid-select2:focus {
border-color: #dc3545;
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
But the result is the same;
You can see the problem in
JSFIDDLE
Someone has idea how can i deal with it?
Thanks so much!
The flikcering is because you're adding the class the the select box's class attribute so the style is applied immediately. Afterwards, select2 classes are applied which hides the select box (causing the flicker).
One way around this is to simply apply the class when the document is ready.
$(document).ready(function(){
$('#combo').select2
({
theme: 'bootstrap'
});
$("#combo + span").addClass("is-invalid");
});
EDIT: To fix the focus problem you're experiencing you need to over-ride a couple of classes.
.is-invalid .select2-selection,
.needs-validation ~ span > .select2-dropdown{
border-color:red !important;
}
.is-invalid .select2-selection selects the top part of the dropdown, and the second class (.needs-validation ~ span > .select2-dropdown) selects the actual dropdown list. Note that I've added .needs-validation to the top level div once the form is validated you can simply toggle that to was-validated
https://getbootstrap.com/docs/4.0/components/forms/#validation
Here is a fiddle
I was able to use some CSS to style a red boarder
.is-invalid + .select2-container--bootstrap .select2-selection--single {
border: 1px solid #f44336;
}
Did you try to add !important to css property?
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 have this bootstrap and custom css that generates nice "books on shelves". When I use the code itself it works. But when I insert the code in the div:
<div class="panel panel-default">....code from the link...</div>
suddenly the shelves disappear. I noticed that somehow pseudo elements (:before, :after) stop working when I use them in panels. Do you have an idea what is going on? Please help :)
bootstraps panel has a background color of white that overrides your :before and :after css.
.panel {
background-color: #fff; /*GET RID OF THIS*/
}
(you can choose to do this in different ways:
you can change the native bootstrap (not recommended, and you cant if you're using cdn).
add a different class on the panel and put this code in:
.newClass { background-color: none !important; }
(you can use none or transparent) either one will get your shelves css back
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;
}