I've been implementing Bootstrap 3 onto my website, and I am currently experiencing this issue after having selecting the Contact button and closing the pop-up window that comes up:
I do not want Contact to be lit up or highlighted in any manner after closing the popup. What do I need to edit in my CSS file to make this work?
Thanks.
EDIT: Here is my code showing my nav-bar with all of my options. I believe I'm supposed to select something in here in order to edit the CSS of the Contact area.
In CSS, the focus pseudo class is used for styling an element that is currently targeted by the keyboard, or activated by the mouse.
By clicking on the button, Bootstrap adds styles to your button via btn:focus, btn-primary:focus, et cetera. One of the styles Bootstrap adds is a border around the button. In order to override this style, you can create a selector that hides the border of your button. For example, you could do something like this.
.btn:focus {
border: none;
}
If this doesn't work, try
.btn:focus {
border: none !important;
}
This will do it for you see example: https://jsfiddle.net/DIRTY_SMITH/LLvkptuk/
Add this to your CSS:
.btn:focus,
.btn:active {
outline: none !important;
}
Check this
input[type="button"]:focus,
input[type="submit"]:focus {
outline: none !important;
} /* for forms */
a:focus {
outline: none !important;
} /* for anchor */
Related
On my website, when I click on a link that has a href or onclick reference, it gets a blue highlight that ends my design. How to remove? See an example in the menu icon that has an 'onclick' reference, I managed to take a print right from the time I click on it on my phone.
How can I remove this?
The icon is blue that I did not program, all links on the site look like this
If a media screen solution suit you. That can work:
#media screen and (max-width:500px) {
.selector:active, .selector:hover {
background-color: unset;
color: #999;
}
}
Given that we're working with an "a" element you can easily get rid of the blue highlighting with basic css:
a:hover, a:focus, a:active {
text-decoration: none;
color: #3c4146 /* Just a mild gray, you can change this to whatever you want */
}
In the case of a different element, which in your case looks like a btn/div with a set background, you can adapt the css to it.
You can set the bg back to its original color when you either hover, focus or set the element to active.
.element:focus, .element:active, .element:hover {
background-color: #000000; /* Use the original element background-color here */
}
a {
-webkit-tap-highlight-color: transparent !important;
outline: none !important;
}
I was testing my new pet project on my phone and I also had an issue with BLUE outline/highlight flashing effect upon TAP.
For me #RedhaBenKortbi answer worked.
After applying this CSS to tags, the links were no longer flashing with the blue-ish outline/highlight when you click.
.scaledImage a {
-webkit-tap-highlight-color: transparent !important;
}
Doc says:
-webkit-tap-highlight-color is a non-standard CSS property that sets the color of the highlight that appears over a link while it's being
tapped. The highlighting indicates to the user that their tap is being
successfully recognized, and indicates which element they're tapping
on.
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color
I'm using ui-bootstrap-tpls-2.5.0.min.js. I changed dropdown-menu's backgorund color like this in specific html.
.dropdown-menu {
background-color: transparent;
box-shadow: none;
}
But it makes datepicker's background transparent too. I know why it happened, so I cleared that line but nothing changed.
So I want to change datepicker popup's background using CSS selector like this,
.datepicker .ul{
background-color: white;
}
//this is an example code.
what selector do I have to choose to change datepicker's background?
If this is what you require, you need to add these two styles that are highlighted.
Happy coding :)
We are writing a site for a user cannot use a mouse. He wants to press Tab on the keyboard to move between images and press return to go to the href link associated with that image. We got that much worked out OK.
But how can we highlight the image in some way so he can easily see which image he has tabbed to?
We don't have an jQuery skills so we are trying to keep our coding to html and css
We have the code:
I thought I could introduce a class to change something about the image.
For example, we introduced a class
.classA {border:double;}
and using it
But that didn't work. We tried lots of effects but none of them worked.
Any suggestions as to how we can highlight the image he has tabbed to?
how we can highlight the image he has tabbed to
When tabbing between anchors on a page, that element gains "focus" - using the :focus pseudo selector, we can therefore restyle images that are inside an anchor that has been tabbed to with a:focus img - for example:
a:focus img {
border: 1px solid #F00;
}
Though adding a border could break layouts - you could instead do something like:
box-shadow: 0 0 10px #F00;
To give it a red glow - making it obvious, without affecting the layout of the elements.
Remember that by default, the browser puts on an outline.
Try:
img:focus {
outline:none;
border:2px solid #ABCDEF;
}
This is specifically with the selectBoxIt jQuery plug-in, using the jQueryUI theme.
I have this set up for the hover action:
/* Individual Option Hover Action */
.selectboxit-option .selectboxit-option-anchor:hover {
color: #ffffff;
background-color: #ff0000;
text-decoration: none;
}
That works fine. When I hover my mouse over the options, I get a red background with white text.
However, when I do this...
.selectboxit-option:focus .selectboxit-option-anchor:focus {
color: #ffffff;
background-color: #ff0000;
text-decoration: none;
}
...nothing changes.
I see that all the demos on selectBoxIt's main web page DO have changing background colors with keyboard focus...so what am I missing?
Technically, each option doesn't use the focus event, which is why the focus pseudo selector is not working for you. For the jQueryUI theme, the "active" option adds the ui-state-focus class, so to change the "focus" CSS style, you could have a rule like this:
.selectboxit-option.ui-state-focus {
background: #CCC;
}
Basically I want to change the style of drop down menu of autocomplete.
There is a main div of pac-container and divs inside (pac-items).
I have the following css code:
.pac-tem:hover, .pac-tem:focus {
background-color: black;
}
For hover it works just fine. But When I navigate with arrows it uses default style
Can anyone help?
I had the same problem, I resolved using the class in css
.pac-selected {
background-color: black;
}