When I click on the day picker component container or an individual cell within the calendar, a blue border gets added.
I couldn't find the related CSS in style.css, nor do I see any classes being added in DevTools that could be adding the blue border.
How do I get rid of this?
The blue "border" gets added when the DayPicker-wrapper element gets focused. It's actually the outline css property that generally gets added to any focused element unless you specify otherwise.
To remove the outline from the overall DayPicker element, add the following to the .DayPicker-wrapper class in your DayPicker component stylesheet:
.DayPicker-wrapper {
outline: none;
}
You can also remove it from the individual days by adding {outline: none;} to the .DayPicker-Day class.
Mark's solution works perfectly; just fyi, if you want to remove all outline (blue border) without adding multiple classes, try writing:
.DayPicker * {
outline: none;
}
Related
After have changed marker icon (same as original, just colorized), borders are still displayed under Firefox, not from Chromium :
This CSS code has no effect:
border: none; / border: 0;
overflow: hidden;
An idea to force hide this undesirable effect?
In fact, this effect has added by an outside element: .leaflet-pane.leaflet-shadow-pane ; no rule applied on .leaflet-pane.leaflet-marker-pane that contain markers.
Code inspection has been not easy: element to hide
Solved by simple display: none; rule on this element .leaflet-pane.leaflet-shadow-pane: you can see
Seems rather like the "border" you see is actually the placeholder for a broken image.
Typically if your custom Marker icon's shadow is missing (e.g. you forgot to change its default value, while not providing the default shadow image asset)
This would also explain the different behaviour between browsers, since each of them hints for broken image differently.
I would like to change the default outline glow of bootstrap for any dom element. I already did it for inputs and buttons but on any other element it is still blue. So for example, I press TAB on my keyboard and it goes to next element and it glows in blue. How do I change that? I can't find it in the css. Please look at the menu items below:
When I hit TAB on my keyboard it moves to the next each time and makes it glow in blue. How do I change that color? I think there is an easier way to modify the bootstrap css, either override it or host it locally and modify it rather than having to go after each class and specify the active, focus or whatever is causing this to glow in blue. Any ideas??
The outline glow you mentioned is called outline in CSS.
You will have to change the :focus pseudo property in css to get the color you want when you press the TAB key.
*:focus{
outline: red; /* Your color */
}
*:focus is what you are looking for:
*:focus {
box-shadow: 0 0 0 .2rem red !important;
}
you could override it using !important; like i did.
I have the task to track down and remove this blue border around the drop down box however I have not seen any css that is relevant to this. From what I've read the drop down is part of the shadow dom but where is this blue border coming from?
I am not sure where it's coming from, but you can override it by using CSS if you have the privilege to update the css.
I don't know how your markup is like, but this will override the blue border.
.class-dropdown {
outline: none;
}
NOTE: If accessibility is a requirement, it's probably bad idea to remove the blue border. What is better probably have a state style when the dropdown showing / selected
Hope this helps.
I have a modal window with a bootstrap modal-content class, where I need to change the background color to transparent for a particular modal. Because this has been set up for me, I can't actually add classes to the modal-content div.
I only want to change this property if the div within this contains the class erm-modal. Currently my Less file looks like this:
modal-content {
background-color: transparent;
.erm-modal {
......
}
}
This changes my background color correctly, but also changes the background color for all the other modals as well! Can I write some less to allow me to only change this property if the child div contains .erm-modal?
I am using AngularJS if that makes a difference.
Thanks
I am playing with the Bootstrap accordion & can't seem to be able to remove the underline/border which is displayed when the heading is open.
The accordion-heading style doesn't seem to specify a border and I can't locate where it's coming from using an element inspector.
The yellow highlighted line is what I am interested in (I have no trouble overriding the other borders.
Any tips?
.accordion-inner (below the header, encapsulates the accordion content) has a border-top property specified. This is probably what you're looking to modify/remove. The following CSS snippet will remove the border you're referencing.
.accordion-inner { border-top: 0 none; }