I have an webapp, where buttons are created with <a> elements, and all have href set to #. I want to remove blue border around <a> links during mouse click, because Opera Mobile annoyingly highlights all <a> elements, which has same href set.
Example picture:
How can I remove it?
I think Opera may be looking for something a little stricter on the outline element.
Try:
a:focus { outline:0px solid #fff; }
The 'solid' and 'colour' will be ignored.
Try this:
a, a:active, a:focus {outline:none}
Also if you are having trouble on a Flash object/embed, you can:
object, embed {outline: 0}
Not 100% because I can't really test, but did you try adding outline: none; to the css for links? You may need to add it to a:focus and/or a:target
Uh-oh:
Spatial navigation: Spatial Navigation
is an Opera feature whereby each
element available for activation is
put into a collection. When the user
moves a joystick or clicks specific
keys, the focus is moved to the next
element in the collection. This
element is typically highlighted with
a blue or black border. Links, form
controls, and elements with onclick
handlers are added to the collection.
http://dev.opera.com/articles/view/characteristics-of-widgets-on-mobile-pho/
Use div's with onclick() handler, instead staight <a> or buttons:
Example:
In CSS:
#home-send{
background: url(gfx/button.png) no-repeat;}
On page:
<div id="home-send" onclick="next('NEXT ACTION');"></div>
On click on the DIV the action will take place ,but no outline borders effect.
I hope this help
To remove the Blue border use this on TOP of you CSS file
:focus { outline: 0 solid; }
or
:focus { outline: none; }
I have had the same problem and none of the answers here worked. However, I recently found a solution that worked for me (A little late to the party however...).
Try:
:focus{
outline: 2px solid rgba(0,0,0,0.0);
}
If that doesn't work, you can go more specific like:
a, a:active, a:focus {
outline: 2px solid rgba(0,0,0,0.0);
}
You need to actually set an outline first, then make it transparent.
https://dev.opera.com/tv/tweaking-spatial-navigation-for-tv-browsing/
Related
I'm practising animations in CSS but somehow one of the buttons refuses to change.
It's the last button, all alone, that needs to have white text when you hover on it (and also white text when you click on it). I've tried some things but didn't work, who can help me? (Also I prefer not to use javascript)
Code can be find here: https://limoon.nl/test-animations/
Edit: It worked, thanks for all the tips!
First off, you shouldn't have an anchor inside of a button. It's better to ditch the outer button and style the anchor with the same styles as a button.
The reason why the anchor isn't changing colour is because you are setting it here
/*link */
a:link, a:visited, a:hover, a:active {
color: black;
text-decoration: none;
}
This will take precedent over the button hover styling
You should not use links within the button.
<button class="LMbuttonBG">Hover over mij</button>
Replace with this:
<button class="LMbuttonBG">Hover over mij</button>
Currently, in your code, the color style of tag is black.
Like this and try it.
.LMbuttonBG:hover, .LMbuttonBG:active, .LMbuttonBG:focus {
background-color: black;
}
.LMbuttonBG:hover a, .LMbuttonBG:active a, .LMbuttonBG:focus a{
color: #fff;
}
You can specify a class for link inside the button like that.
.LMbuttonBG:hover a {
color: white;
}
I have a kendo grid on Cordova app. Here on the grid, the scrolling is jagged due to the css rule 'k-grid tr:hover' in kendo css. If I disable this rule from developer tools, scrolling is smooth. Is there any way to disable this hover rule?
I don't want to override hover behaviour. I want to disable it.
Edit: The problem is due to hover the scrolling is not smooth on the grid. The scroll starts after touchend of the swipe but instead it should move with touchmove. This causes the scrolling to be jagged. Removing the hover rule solves this and makes scroll smooth.
Do ask for further clarification if necessary.
You can use pointer-events: none property on the DOM element.
https://developer.mozilla.org/en/docs/Web/CSS/pointer-events
.k-grid tr {
pointer-events: none;
}
With this property, the hover event on that element will be completely ignored.
I've "solved" it by disabling the hover and then replicating the tr even background color:
.k-grid tr:hover {
background: none;
}
.k-grid tr.k-alt:hover {
background: none;
}
.k-grid tr.k-alt:nth-child(even) {
background-color: #f5f5f5;
}
of course you can play with the colors
I took hint from Gabriel's answer but I applied pointer events none to the td elements inside .k-grid tr. But this is just a temporary fix as this removes the possibility of adding pointer events to those td elements. I am still looking for a better alternative.
I'm trying to remove the value of an inherited CSS property using Jquery.
.class1 #id1 div.class2 input.class-input{
border-color: #bbb3b9 #c7c1c6 #c7c1c6;
}
Anyone tell me how to remove this "border-color".
Thank.
Create a new class for example
.new_class{
border-color: #00ffdd !important;
}
!important does the trick!
Check this
You can use jQuery, but you'll have to assign a value to the border-color property. You can use transparent though:
$('.class-input').css('border-color', 'transparent');
Edit: Or you can disable the whole border:
$('.class-input').css('border', 'none');
You can either swap the on your div to change the color, or set the border color to empty using
$(".class1").css("border-color", "");
But I would recommend swapping out the class using the removeClass and addClass JQuery functions.
If you still want to keep the width of the border:
border-color: transparent;
If you want to remove the border all together
border: 0;
Edit: border: none; will give your the same result
So your jquery could look something like this:
$(".class-input").css("border","0");
However I would suggest using CSS if you don't need to make it animated. Since you raised the concern about .class1 #id1 div.class2 input.class-input.myclass (I'm assuming that's what you mean since you wouldn't be throwing a div into an input box.
You can use the CSS pseudo-selector :not
.class1 #id1 div.class2 input.class-input:not(.my-class){
border: 0;
}
The simplest way to handle this is to add another reference to give your override code a higher specificity.
.class1 #id1 div.class2 input.class-input [#MyNewID]{
border: none;
}
This removes the border for the area where you have added the ID so that if you are using this same format in other pages you can add an additional ID on the element on the page where you want the border to "disappear"
Please don't use !important this is a lazy way to override code and is not necessary 95% of the time. It will also cause you problem later when you are trying to change this if you are pushing down site wide skins.
In JQuery UI, there are a lot of CSS double classes, for example for JQuery UI's tabs
.ui-widget-content .ui-state-default
{
border: 3px solid #EEEEEE;
background: #ffffff url(BGDel.png) repeat-x;
font-weight: bold;
color: #ffffff; outline: none;
}
The above works fine if it is in a CSS file.
I want to use javascript / Jquery to change one of property, like
$(".ui-widget-content .ui-state-active").css({"font-weight":"normal"} );
It doesn't work. Could anyone help how to set or change the CSS double class properties through script? Thanks.
$(".ui-widget-content .ui-state-active").css({"font-weight":"normal"} );
This line does not change the CSS class itself, it only selects an element matching this selector .ui-widget-content .ui-state-active.
So please do an "Inspect element" for example in firebug or Google Developer Tools, find needed element, and see if you are using the right selector.
Since .css() function puts all given code into style attribute, it should override any class that is in CSS file, so i think, that you should try a different selector to match your element.
There are two class apply on your element first is .ui-widget-content and second is .ui-state-default.
in your example you set css to .ui-widget-content or .ui-state-active. but it is not correct because the a another css .ui-state-default apply on that element.
so you need to use !important or also apply jquery code for.ui-state-default class
try -
$(".ui-widget-content .ui-state-active").css('font-weight', 'normal!important' );
or
$(".ui-state-default").css('font-weight','normal'); // for fire fox use css('font-weight', '400');
or
$(".ui-widget-content .ui-state-active .ui-state-default").css('font-weight', 'normal');
Actually I'm using a plugin SpryTabs to navigate the menu. I've used two background-images for activating and deactivating of tabs. I'm activating a tab on hover. Means the tab gets highlighted and deactivate the selected tab on clicking other tab.
Until here everything is fine. But the real problem comes when user clicks on the tab after hover, the border gets displayed around the image.
This doesn't happen in Firefox, it happens only in Chrome and IE.
You can add the following code in CSS for specific elements
textarea:focus, input:focus{
outline: none;
}
And for all elements on a page use this generalized code in your css
*:focus {
outline: none;
}
This worked for me when there was an orange coloured border appearing around the images and input boxes.
Try outline: none; on the images
Had same issue once, following style fixed problem:
outline: 1px solid transparent;
Btw outline:none has no effect for chrome for some reason
Useoutline:none or outline:0
Check the similar one here