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.
Related
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;
}
Twitter Bootstrap has background-color properties set for navigation items on their :focus state, but I want to undo that declaration for a specific navigation element.
For example, in some custom theme, let's say when the navigation item is in its default state, its background color is dark red. And then when you hover over it, it changes to light red.
Then, because of Bootstrap's declaration for the :focus state, if you click a navigation item, and move your mouse away from it, it will become light grey (from the default Bootsrap theme). This is what I want to get rid of.
What I want to achieve here is that, when you click an item, it should keep its default behavior, meaning dark red without the mouse over, and light red when the mouse is over it. But this doesn't work, because the :focus state seems to override the :hover state, so whatever I try to declare for :focus, works for both mouse over and mouse away.
I've also tried with background-color:transparent, and background-color:inherit. But the problem is always the same, which is that, whatever the color renders to, it keep being that regardless of the mouse being over the link or not. I want the background color to keep changing on hover, even when that link gets focus.
in your special element put an extra class and set the css.
.ExtraClass:focus{
color: #FFF !important;
}
.ExtraClass:hover{
color: #000 !important;
}
.ExtraClass{
color:#555 !important;
}
I'm trying to override the yellow background color Chrome puts in for -webkit-autofill text elements. But even though the Inspector tool tells me Chrome is applying my own css rule, the computed style is still yellow. Here's what I mean:
Here's a codepen of the issue. Click on the input field to give it focus and then select something from the dropdown list. (Chrome uses the 'name' attribute to find matching autocomplete options so you may need to change it to something you've used before to get the autocomplete dropdown to show)
Why isn't the computed style for this element white instead of yellow?
Apparently you can't override this, and need to use a hack as a workaround:
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset;
}
Edited after resolution for clarity.
I'd like to change the hover color over a button from the default blue to another color. I would like to do this without having to completely redefine all the CSS for the button. I only want to override the hover color, leaving the remaining defaults in place.
Pics:
Normally, it's this: Hovering, it's this:
I want to change the highlight color on hover.
EDIT:
Have tried:
.Cancel:hover
{
background: linear-gradient(black, white); //Tried these separately
background-color:Red;
}
and the button markup:
<asp:Button ID="btnPprGrdsCancelRefresh" runat="server" Text="Cancel/Refresh" CssClass="Cancel" />
The linear gradient appears to not be doing anything, and the background color changes the color of the button, not the mask over the button.
The :hover pseudo-class does that:
button:hover {
background-color: #f00;
}
However, styling form controls is usually tricky. If you're trying to let the browser render the buttons with its default styles, then just change the background-color on hover, it's not going to work; other properties (like borders) will also change, as this live example demonstrates. You have to choose between letting the browser and operating system decide how the control will look, on all states, or create your own styles for every state.
button:hover{
//style color here
}
Whenever you press the tab key while on a web page, the browser puts a border around whatever element is selected. IE and Firefox just use a dotted gray line, but Chrome uses a solid yellow highlight. My problem is that Chrome also puts this border around any active field inputs - so whenever a Chrome user clicks one of my contact fields to input their info, that yellow border pops up around the text box and really messes up my color scheme.
Is there a way to override this behavior in chrome through CSS?
Use this:
input:focus, textarea:focus { outline: /* whatever you want it to be */ }
See here.