I want to remove the outline on an active jQuery UI tab (or at least change the color).
Working from this example, I tried this unsuccessfully:
<style>
#tabs .ui-state-focus
{
outline: none;
}
</style>
(based on a tip from this question and answer).
What's the trick to removing the outline from an active tab?
I don't believe it's the class focus that you need to target, it's the CSS psuedo-class :focus
.ui-state-focus:focus { outline:1px dotted red !important }
if that works, go with {outline:none} to remove it. You are sort of jacking up your accessibility by worrying about it though, FYI.
There are lots of ways to do this. Here are two examples (I suggest option 2):
Option 1
Remove the outline from all elements that use the .ui-widget class:
.ui-widget * { outline: none; }
Here's a working fiddle.
Option 2
Make the outline color transparent:
#tabs li a
{
outline-color: none;
}
Here's a working fiddle.
I managed to remove it with
.ui-tabs-anchor:active, .ui-tabs-anchor:focus{
outline:none;
}
if you want to remove the outline only on a specific tabs then I suggest you use the following:
$("#tabs ul li").css({'outline': 'none'}); // where #tabs can be any specific tab group
inside the script tag of your html.
You can disable the outline by specifying outline-width: 0;
#tabs li a
{
outline-width: 0;
}
A more generic solution without using IDs would be:
.ui-tabs ul li a
{
outline-width: 0;
}
Demo: http://jsfiddle.net/ebCpQ/
I had to do this to prevent possible initial tab order focus too:
.ui-state-active a, .ui-state-hover a, .ui-state-visited a, .ui-state-focus a, .ui-state-focus:focus {
outline:none;
}
you can try this
a:focus { outline: none; }
To make it more clear, the outline appears on the element inside of the ul.ui-tabs li.ui-tabs-nav.
Most of above examples forgot to mention this: so here is a working answer for the original question:
.ui-tabs-nav .ui-state-focus a {
outline: none;
}
http://jsfiddle.net/xJ9Zr/5/
Oddly enough, none of this worked for me. I had to add a border to get the outline (or maybe it was a blue border) to go away:
.ui-state-hover, .ui-state-focus, .ui-state-active
{
border: 1px solid #ccc !important; /*Or any other color*/
border-bottom: 0 !important;
}
Related
If i have a ul, how do i set a border-bottom on all the li items except the last one? I'm also trying to make the width of the border 180px. here's my code:
HTML
<ul class="sideNav">
<li>History</li>
<li>Mission</li>
<li>Associations</li>
<li>Careers</li>
</ul>
CSS
.sideNav {
margin:0;
padding:0;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
width:216px;
background-color:#017dc6;
}
.sideNav li {
list-style-type:none;
text-align:center;
text-transform:uppercase;
width:180px;
}
.sideNav li a {
border-bottom:1px solid #80bee3;
width:180px;
color:#ffffff;
text-decoration:none;
display:block;
padding:18px;
}
Dec 13th, 2018: Note that there is no need to use this solution in today's modern browsers. You should feel free using the answer below mine li:not(:last-child) { border-bottom: 1px solid red; }
Without using JavaScript and not having to support IE7 and below (IE8 fails on the second one) there are three options you can use: :first-child, :lastchild and the + selector:
:first-child
li { border-top: 1px solid red; }
li:first-child { border-top: none; }
:last-child
li { border-bottom: 1px solid red; }
li:last-child { border-bottom: none; }
+ selector
li+li { border-top: 1px solid red; }
The problems arise if you need to support IE8 and your design doesn't allow you to put a border on the top of your elements as opposed to the bottom.
EDIT:
The fix to your width issue is that you're adding 180px to 2*18px of the a element, remove the left right padding, and set padding: 18px 0; and you'll be golden. (updated jsfiddle: http://jsfiddle.net/NLLqB/1/)
Here's a jsfiddle of it: http://jsfiddle.net/NLLqB/
Use :not(:last-child).
.sideNav li:not(:last-child) a {
/* your css here */
}
One way: You can override for the last one using a rule like below with :last-child (Since you tagged css3):
.sideNav li:last-child a {
border-bottom:0px; /*Reset the border for the anchor of last li of this ul*/
}
Demo
There are polyfills available for IE8, but if you can provide a classname for the last one and apply rule to it to reset the style would be of better support, rather than using css3 (if your intention is to support older browsers as well).
if you are using scripting language like jquery you can easily add a class to the last child as jquery takes care of cross-browser compatibility.
You can also use in-line CSS to correct this problem.
<li><a style="border-bottom:none" href="/careers.asp">Careers</a></li>
This will remove the border from the "Careers" link. Note that it will only work if you put that code in the <a> tag since that is what the border is being applied to, not the <li>.
The downside of this is that if you add something to the list, then the second-to-last list item will have no bottom border, and the last will.
Not the best solution, but an alternative one that accomplishes the same thing. Cheers!
Compare this - http://bootswatch.com/2/cerulean/ and this - http://bootswatch.com/cerulean/ (third bootstrap), when you in 3rd version click on "Download" at the top of the page and right at once then click it again and move pointer away from it - everything is OK, but if you try to do the same in 2nd version - you will see focus border on element and darker background, I have solved it by adding
.navbar .nav>li>a:focus {
background-color: rgba(0,0,0,0);
}
.navbar .nav>li>a:focus:hover {
background-color: #1684c2;
}
.dropdown-toggle {
outline: none !important; }
But I assume that it is not the best solution or may be not crossbrowser - that is my question.
Setting an !important tag on an element is not usually considered best practice, but if you use the implement the outline property on your a element that should work as in:
a:focus {outline: 0px none;}
li.widget ul li {
margin-bottom: 0.714em;
background-color: #000000;
}
on Rootmyandroid.org
I want to set the background color of right side bar sub widget links to black so I have given #000000 color. And I have set the thing (for which I want to add black background) to green color on hover.
When I use firebug to inspect CSS, it does not show the background-color: #000000;
What could be the issue?
In your custom.css you have a line:
//side bar edit start color wala
this is not a valid comment and so the rule
li.widget ul li {
margin-bottom: 0.714em;
background-color: #000000;
}
is ignored
comments on styles sheets are always opened /* and closed */:
/*side bar edit start color wala*/
Set the background-color in your layout.css at line number 227
li.widget ul li {
background-color: black;
margin-bottom: 0.714em;
}
If you're trying to change the color of the LINKS, you have to add "a" like so:
li.widget ul li a { ... }
or
li.widget a { ... }
Why aren't my hyperlinks changing colors or underlining? I have in my CSS in a standard VS 2010 site:
a:link, a:visited
{
color: #034af3;
outline: none;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
outline: none;
}
a:active
{
color: #034af3;
outline: none;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
What am I doing wrong? Am I in the wrong spot? Thanks!
First thing to do is rule out that there are no other style rules being applied later that override yours, or none earlier that are more specific (or use !important) which will not be overridden by your styles.
Also make sure your CSS is in the right place within the HTML.
Make sure there are no other elements, such as a span, within the link that might have styles applied to them which are overriding the a styles.
There are a multitude of other debugging steps to take, but I hope this gets you pointed in the right direction.
You have it set to not display any text-decoration on hover.
With Hover Decoration:
http://jsfiddle.net/KbZNb/
Without Hover Decoration:
http://jsfiddle.net/KbZNb/1/
It looks like it is changing color, but only slightly due to the color similarities of #1d60ff and #034af3
The colors are nearly the same that's why you didn't see the changes. Change the a:hover to #ff0000 and see the outcome
a:hover {color:#ff0000}
i have a a:hover for all my links on my page:
a:hover {
background-color: blue;
text-decoration: underline;
color: black;
}
but but there are specific ones in a div that i don't want anything to happen when you hover over them, so can i do something like this?
#what_we_offer a:hover {
background-color: none:
text-decoration: none;
color: none;
}
basically i don't want it to do any of the above when it hovers over them specific links.
thanks
Yes that should work fine, although you likely don't want to set none unless you really don't want any style... setting your base colors etc. should work fine.
#what_we_offer a:hover {
background-color:#fff;/*presuming was originally white*/
text-decoration:none;
color:#000;/*presuming was originally black*/
}
PS I'm not sure if it was just a typo, but your original background-color:none: line was terminated with a colon vs. a semi-colon thus it would have caused issues.
#what_we_offer a:hover {
background-color: transparent;
text-decoration: none;
color: none;
}
use transparent instead of none, that works.
thanks for all the answers.
Rather than using id with css use Class
/* for link where you want to change color on hover */
.Link a:hover {
background-color: none:
text-decoration: none;
color: red;
}
/* for link where you dont want to change color on hover */
a:hover {
background-color: none:
text-decoration: none;
color: none;
}
When you want to override CSS values you can do two things: adding new CSS declarations after the one you want to override or using "!important"..
So for your problem you can try:
a.reset:hover {
background-color: #FFFFFF;
text-decoration: none;
color: #000000;
}
.. and then add the links you want to override this new class:
Link with reset
But this CSS class must be declared after you normal "a" tag declarations or this won't work.
Another way is to use !important but I recommend not to abuse this one. But for overriding it's the fastest and safest way to be sure it will work:
a.reset:hover {
background-color: #FFFFFF !important;
text-decoration: none !important;
color: #000000 !important;
}
.. and this one you can add anywhere in your CSS file and any link with the "reset" class will get those styles: white background, no text decoration and black text.
Oh and for the background you cand try: background: none; and will clear all background styles.. background-color, background-image, etc
As a side note.. id's are used to reference a single element and it must be unique.. and classes are used to reference multiple elements. Multiple uses of the same id as you would use a css class.. you can brake javascript and it won't validate your HTML.
Yes but beware that a:hover{} should come before #what_we_offer a:hover {}.
I think if you do the reverse of what Pranav said, you can have less modifications i,e
/* for link where you ***DO*** NOT want to change color on hover */
.Link a:hover {
background-color: none:
text-decoration: none;
color: red;
}
/* for link where you want to change color on hover */
a:hover {
background-color: none:
text-decoration: none;
color: none;
}
so you need to add class for a href s in some particular DIVs
You can make use of CSS selectors. The best thing I think you can do is to use the selector not. Let me show you an example:
<html>
<head>
<style type="text/css">
a:not([not_custom]){
background: #00FF00;
color: #FF0000;
}
</style>
</head>
<body>
<div>
Test 1
Test 2
Test 3
Test 4
Test 5
Test 6
</div>
</body>
</html>
As you can see, I'm defining the a style using the not selector. So, I'm saying that I want to put a green background and a red color to all the a that doesn't have the attribute not_custom. As a result of this, you can see that Test 1, Test 3 and Test 5 will have the style defined and Test 2, Test 4 and Test 6 will be normal, without the style.
NOTE: you can define the attribute you want. You don't have to named not_custom. It can be called whatever if you want.
a:hover {
background-color: none:
text-decoration: none;
color: none;
}
This is correct.
If you want only particular page, add
body-id a:hover {
background-color: none:
text-decoration: none;
color: none;
}