How can i avoid selecting a div and hide the highlight when i click in it?
I want to hide the dotted outline:
(can't get the screenshot to appear, here it is: http://i.stack.imgur.com/3OKaP.png)
it can be done with a css class .
like .if this is your div :
<div class='disableSelection'>text</div>
then apply this css .
<style>
.disableSelection{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: 0;
}
</style>
Useoutline:none or outline:0
Check the similar one here
this worked in my case:
element {
-webkit-tap-highlight-color: transparent;
}
as per
Mozilla Docs
Add outline:0; to your div.
I usually see this problem on IE more than other browsers.
Ref here for more info:
Not sure if this is what you're looking for, but check Chris Coyers article (Removing The Dotted Outline) on this
But think about the usability issues if you don't set an alternative active state at all. But I guess Chris is mentioning this anyway.
*:focus{outline:none}
please add this code in your css file. This is css issue
Very important to add "a", to say you are adding it for a link:
<style>
.disableSelection a {
outline: 0;
}
</style>
Related
You can see the blue color on this hyperlink which i have visited. I am trying to remove this but still not able to get idea how to do this.
.myLink:visited,.myLink:hover,.myLink:focus,.myLink:active{
color: inherit;
text-decoration: none;
}
Add this to your css class
outline: none;
border: 0;
Its maybe your outline or box-shadow or border when you hover...you have to check that by inspecting the element in the browser...
Use below css to the link:hover.
.myLink:visited,.myLink:hover,
.myLink:focus,.myLink:active{
color: inherit;
text-decoration: none;
outline: none;
box-shadow: none;
border-color:transparent;
}
To avoid such cases, its always better to add css reset so that there is no need to always override the default browser styles, In your case its the default outline applied by the browser.
Check out this page , it will fix this issue as well as other you might face later.
.myLink:visited{
border:none;
}
I would like to remove the blue outline it gives me when my radio is clicked/focused.
I tried using outline: none and border: none, but nothing seems to be working.
Does anyone have a solution for this?
Screenshot of what I’m talking about:
Remove the outline when the input element has the focus.
input:focus{
outline:none;
}
As a side note, this is only for Google Chrome, other browsers use different techniques for showing an input element has the focus.
UPDATE:
Having worked a lot with accessibility lately, I've come to understand that removing the outline from inputs is not a very good thing. It prevents people using keyboard navigation to see what's focused.
ORG POST:
You might have to be more specific with your selector. When using bootstrap you have to override it (in my version, 3.3.6 at least) by selecting input[type="radio"]:focus, not just input:focus, like this:
input[type="radio"]:focus {
outline: none;
}
Maybe a separate issue, but I had to set box-shadow to none as well.
input[type="checkbox"] {
outline: none;
box-shadow: none;
}
I know this is old, but hope that it helps somebody!
input[type='radio']:focus {
outline: none !important;
box-shadow: none !important;
}
/*For Bootstrap*/
.custom-control-input:focus ~ .custom-control-label::before {
box-shadow: none !important;
}
Try This
input[type="radio"]:focus {
outline: none;
box-shadow: none;
}
Try this:
input[type=radio] {
outline-color: transparent;
}
Hope it helps!
I use the <abbr> tag to show the full content of some trimmed words with the CSS property text-overflow: ellipsis .
When using <abbr> these words get a dotted underline and on hover cursor changes to one with a question mark.
I did manage to change it using this. But, I'm not sure this is the best way, is there anything wrong with this approach?
abbr[title] {
border-bottom: none !important;
cursor: default !important;
}
Starting with v40 Firefox switched to using text-decoration to provide the underline and chromium will be doing it that way too. So you should update your code to include that if you need to support those browsers:
abbr[title] {
border-bottom: none !important;
cursor: inherit !important;
text-decoration: none !important;
}
It sets a border and text-decoration. Remove that with:
border: none;
text-decoration: none;
Example: jsfiddle
This should work:
abbr[title] {
text-decoration: none;
}
This uses styling abbreviations.
abbr[title] {cursor: default !important;}
Remove that with abbr[title] {text-decoration: none !important;}
I am trying to write a selector like this, but to no success:
.something::after::selection
Basically I am already using ::after to inject some content, namely an image. But I want to prevent the user from being able to "select" this image and get an ugly blue back-shadow.
Normally I can prevent this with the following:
.something::selection
{
background-color: transparent;
}
But it does not seem to combine well with ::after.
Has anyone tried this before or have a solution?
No, in firefox I'm 100% sure that you can't change that effect on selected images, is system-specific, and not customizable yet
*edited
To prevent images to be selected you can use following css:
img {
-o-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
Also see the updated jsfiddle.
With ::after see this jsfiddle.
Is it possible to remove the borders around a checkbox so that it appears invisible? I have it placed in a DIV with a color background.
As this is the first result for me when searching for "remove checkbox border" in Google, let me mention that checkbox default styling could be removed in all browsers except IE with the appearance property:
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
Unfortunately, its not possible to remove borders on browser native checkboxes (it will not work in all browsers), You will have to write your own checkbox-like state widget to implement this. Check out Nice forms if you want to style your regular form controls with custom styling
For FireFox: try border:none.
For IE try: style="background:transparent;border:0"
The other solution is to create your own images for checked and unchecked displaying the appropriate onclick of the image.
I know this is a late answer, but a CSS expert I work with gave me this way to get rid of the border around a checkbox (and probably radio button) in IE10:
Set the border color to the same color as the page's background.
Apply a box-shadow of "none" to it.
That's it. Worked like a charm!
input[type="checkbox"] {
width: 25px;
height: 25px;
background: gray;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
outline: none;
position: relative;
left: -5px;
top: -5px;
cursor: pointer;
}
In CSS this is possible by setting the web kit appearance to none. Something like this
-webkit-appearance: none;
You would have to use some widget or a custom ui of some sort to remove the borders.
I'm not sure if this works: <input type="checkbox" style="border: 0;" />