How can I remove the blue glow that surrounds a selected text input box using pure CSS?
This should do it:
input:focus {
outline:none;
}
EDIT (2015): If you are designing for a wide audience, recall that the outline is often a critical accessibility feature for users who navigate via keyboards or require more apparent visual feedback. If you remove the outline, make sure to define an alternative focus state that provides appropriate visual feedback to your users.
I prefer a nice solid reset like:
input, textarea, select, a { outline: none; }
Outline 'none' on anchor tags prevents horrible focus outlines on many Android browsers.
if you are using bootstrap then you have to add box-shadow: none
input:focus {
outline:none;
box-shadow: none;
}
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'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 */
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;
}
I am trying to remove the hover styling on the kendoui treeview component so that when you hover over an item in the treeview it does not have a border / background image etc. I have gotten rid of everything but the border as it looks like there are additional styles that are at play that I cannot seem to locate. Here is my css so far... (in addition to the default theme)
.k-treeview .k-in.k-state-hover{
background-image:none;
background-color:#fff;border:none;
}
.k-treeview .k-in.k-state-selected{
background-image:none;
background-color:#fff;color:#000;border:none;}
Currently it is just showing a border which looks to be black as opposed to the grey one that was there before I added the styles above... Any idea what I can do to get rid of this stubborn border?
With the addition of this style embedded on the page I was able to get it to do what I wanted. I believe this was partially related to how the css was being loaded (order) in multiple different sharepoint webparts on the same page...
.k-treeview .k-in.k-state-hover, .k-treeview .k-in.k-state-selected {
border-style: none;
border-width: 0;
padding: 2px 4px 2px 3px;
}
Coupled with the use of .k-state-disabled, it appears I might have found a slightly better CSS solution.
The nodes don't move at all, and it appears completely disabled.
.k-treeview .k-in.k-state-hover,
.k-treeview .k-in.k-state-focused,
.k-treeview .k-in.k-state-selected {
border-color:transparent;
background-color:transparent;
}
I've also added some JavaScript to prevent the expanding of the nodes, and disabling of the checkboxes.
In my case this helped:
.k-window-action .k-state-hover {
border: none;
background: none;
}
P.S.: "border-color: transparent" caused slight move on hover
What is the difference to use {text-decoration: underline} and {border-bottom: ...}?
which is easy to style and cross browser compatible?
when we should use border-bottom over text-decoration: underline?
Would it be good to use border-bottom always in place of text-decoration: underline?
border-bottom puts a line at the bottom of the element box. text-decoration:underline renders the text underlined. The exact difference depends on the HTML and text layout engines in use, but in general if you want text underlined, then underline it.
Sorry to say this, but some answers here are misleading. Splitting a line of text does not place the border at the bottom of the entire block, because of the nature of inline blocks. Borders under links are actually more consistent across browsers than text-decoration: underline.
See: Text-Decoration vs. Border-Bottom
As Ignacio said, border-bottom will put the line at the bottom of the containing box, whereas text-decoration:underline will actually underline the text. This becomes an important distinction for multi-line strings.
I am a single line and will look similar for both methods
---------------------------------------------------------
would probably render the same for both styles, but you'll get the following for multi-line strings.
I am a string that has been
split and added a border-bottom
-------------------------------
I am a string that has been
---------------------------
split and underlined
--------------------
Apologies for using code formatting rather than properly rending these examples, but you can see the point I'm trying to make.
bottom-border lets you control the distance between the text and the underline, so its more versatile. And (as mentioned above) it allows a different color for the underline (although I don't see a reason why you'll want to do that).
text-decoration is more 'correct' because it is the 'real' CSS property meant for underlining text.
if you set text-decoration: underline for all links then you will have to set text-decoration: none for special links which you don't need an underline. but if you use border-bottom instead, you'll save one line of CSS code (provide you set text-decoration: none in your reset CSS.
so all in all, i'll vote for border-bottom if you have a complex layout with different styles for each link but text-decoration for a simple website coded 'by the book'.
While there are always going to be cases where one is more appropriate than the other, border-bottom offers much more precise control over text-decoration and is therefore probably the preferred method. Here's a quick (likely not exhaustive) list of properties that border-bottom can control/enable that text-decoration cannot:
Spacing between text and "underline"
"Underline" style (dotted, dashed, solid, gradient, image)
Thickness
CSS transitions/animations
Separation of color between text and "underline"
In many cases, most of these abilities will not be needed - but it is good to have them available! I've switched to using border-bottom primarily for the ability to put a few pixels of padding between the text and the underline; the next most common use I've found is divorcing the underline color from the text color.
With CSS variables now shipping in every major browser, a "reset" stylesheet might look something like this:
:root {
--link-color: blue;
--hover-color: purple;
--underline-color: var(--link-color);
}
a {
color: var(--link-color);
text-decoration: none;
border-bottom: 1px solid var(--underline-color);
}
a:hover {
color: var(--hover-color);
border-bottom-color: var(--hover-color);
}
This way, links will display as expected on a "default" basis, yet still allow for customization as needed.
setting your text to display inline (actually, it should be that by default) will cause the border-bottom to render much as a text-decoration rule.
however, i presume that you want to use this technique on links by doing the following:
/* my super eye catching dual colour link */
a {
color:black;
border-bottom:1px solid red;
}
which is all well and good, but you'll find that wherever you have an img tag inside a link, the image will have a red border under it.
if you can figure out a way to target the parent of a page element (the image) using existing selectors and no javascript, i'll buy you a beer but i don't think you'll have much luck.
using "text-decoration" avoids this issue altogether as an image is clearly not text, it will not render an underline when inside a link.
if you have complete control over your markup, i suppose you can bumble your way through by adding classes to every link, but if you're working with any popular CMS system, you're going to struggle with this idea.
Try this border with 1px image
a:hover {
background: url("img/bg-link-hover.png") repeat-x scroll 0px 92% transparent;
background-color: transparent;
background-image: url("img/bg-link-hover.png");
background-repeat: repeat-x;
background-attachment: scroll;
background-position: 0px 92%;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
}