I have a image button in my nav bar but I'd really like to remove the dotted line under the link.
The left arrow is the button which contains the link and as you can see under it tis dotted line appears.
This is the code for adding the navbar and button:
<div id="navbar"> <img src="images/bk.png" alt="Index"/>
I've tried:
<div id="navbar"> <img src="images/bk.png" alt="Index" onfocus="if(this.blur)this.blur()"/>
But it didn't seem to do anything.
From the limited information in the question, I'd suggest that you might be looking for:
#navbar :focus {
outline: none;
}
This selector will style all elements that are focused by the user that are descendants of the element with the id of navbar.
Bear in mind that it's better not to simply remove the outline, but offer an alternative styling to give those users that use the tab button to navigate a visual indication of where they are on the page.
For example:
#navbar :focus {
outline: none;
background-color: #ffa;
}
Related
I have defined this hover for div element
div.MyCSSClass:hover
{
background-color: purple;
}
This is my HTML source:
<div class="
<ul class="MyParentCSSClass">
<li>
<div>
<div>
<div class="MyCSSClass">
<!-- I want to remove CSS hover for this div element -->
I want to remove the hover when the div.MyCSSClass is a child of MyParentCSSClass, So I add this to remove the hover style in CSS:
.MyParentCSSClass div.MyCSSClass:hover
{
}
But it did not work. I still see the same hover style.
Is there a way to remove hover in CSS without me creating a new CSS class for my div tag? I want to keep the same name as I have other CSS property uses the 'MyCSSClass'.
Thanks for the suggestion. I tried
background-color: none !important;
But when I look into chrome, that CSS is being over-written by
.MyGrandParentClass div.MyCSSClass:hover
{
background-color: purple;
}
and the html source is
<div class="MyGrandParent">
<ul class="MyParentCSSClass">
<li>
<div>
<div>
<div class="MyCSSClass">
<!-- I want to remove CSS hover for this div element -->
My question is how my 'Remove hover' css rule is being over-written? I have put "!important" to my rule.
.MyParentCSSClass div.MyCSSClass:hover {
background-color: none;
}
This will overwrite the background color given by div.MyCSSClass:hover. if you are keeping MyParentCSSClass div.MyCSSClass:hover empty as MyParentCSSClass div.MyCSSClass:hover {}, it will not overwrite anything or doing nothing actually.
You need to re-write all the previously added styles to the hover event. In the case you specified, please do the following:
.MyParentCSSClass div.MyCSSClass:hover
{
background-color: none;
}
Background-color : none; is not w3c standard. It will work on some browser but according to w3c standard it's not right way.
So try to use background-color: transparent which will work good on all browsers and w3c can validate your code.
Have fun.
A not-super-advanced coder here.I'm seeking to "simply" adjust the styling of an active link in a sub-navigation on a site.
Example page:
http://printergatherer.com/shop
Referencing the minty green sub-nav that has "ALL ... PRINTS" in it.
Right now, I have styling that effects the active link in ALL navigations on the site. Ideally I have one set of styles for the main nav, and one for this sub nav.
I've managed to add a mint green underline to the active link, which is great, but for whatever reason I just CANNOT get the link color itself to change to the same mint green.
This code gets the bottom-border, but not the correct link color:
#categoryNav ul li.active-link {
color: #C6D4D0;
border-bottom: 1px solid #C6D4D0;
}
Sorry if I'm being a noob, I am about to tear my hair out about something that seems so simple!
You just need to move the color off of the li and on to the anchor tag like so:
.active-link a {
color: #c6d4d0;
border-bottom: 1px solid #c6d4d0;
}
you can see a jsfiddle of it working here:https://jsfiddle.net/24k1zep4/3/
your CSS is really specific, if you can't change that you may have to actually use a more specific selector.
#categoryNav .category-nav-links .active-link a {
color: #c6d4d0;
}
should work if you can't change the specificity and need to override what is already there.
I have created a dropdown menu and now want a background that drops down along with it. Here is some of my code:
HTML:
<div id="background"></div>
CSS:
div#background{
height: 150px;
background-color: white;
display: none; }
ul#navmenu li:hover div#background
{
display: block;
}
(I know there is something wrong with this code, this is what I picked up so far from the Internet...)
li are the list items that comprise my menu.
In the HTML code, the "background" divider is inside and at the end of another divider which contains the dropdown menu:
<div id="menu">
<ul id="navmenu"></ul>
<div id="background"></div>
</div>
ul is my unordered list which contains the menu.
What I want is to have the menu drop down along with the background. The background should also cover (be on top) of the text that comes immediately after the menu. (The menu drops onto the text).
I would have loved to post a picture to make it a little clearer but I don't have enough reputation points yet... sorry :S
If possible I'd like to do it only using css, but I'm also open for other solutions. Any ideas?
Your css is for a child of the li
This html code for your CSS
<div id="menu">
<ul id="navmenu"><li><div id="background"></div></li></ul>
</div>
The background of your HTML is the sibling of navmenu.
This CSS code for your HTML to show background when hovering over navmenu.
<style>
div#background{
height: 150px;
background-color: white;
display: none; }
ul#navmenu:hover +div#background
{
display: block;
}
</style>
If you want to do that from the LI you would need a parent's, sibling selector. I don't have one and would like one but jQuery could do the trick.
Adjacent Sibling (+) combinator is available in Internet Explore 7 plus and is CSS 2.1 standard.
Assuming you want the background someplace other than inside the li block, position:relative it to the area you want it to appear.
I tried to create buttons and insert my own images instead of the standard button images. However, the gray border from the standard buttons still remains, showing on the outside of my black button images.
Does anyone know how to remove this gray border from the button, so it's just the image itself? Thank you.
Add
padding: 0;
border: none;
background: none;
to your buttons.
Demo:
https://jsfiddle.net/Vestride/dkr9b/
This seems to work for me perfectly.
button:focus { outline: none; }
I was having the same problem and even though I was styling my button in CSS it would never pick up the border:none but what worked was adding a style directly on the input button like so:
<div style="text-align:center;">
<input type="submit" class="SubmitButtonClass" style="border:none;" value="" />
</div>
input[type="button"] {
border: none;
outline:none;
}
You can easily give this style to it:
MyButton {
border: none;
outline: none;
background: none;
}
The border: none; will also do the job for you separately without giving outline (Because: An outline is a line drawn outside the element's border. so when there is no border, outline property doesn't have any meaning on its own).
The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. so when you set its value to none, then it prevents your button having any color, image and etc....
For removing the default 'blue-border' from button on button focus:
In Html:
<button class="new-button">New Button...</button>
And in Css
button.new-button:focus {
outline: none;
}
Hope it helps :)
Try using: border:0; or border:none;
You can also try background:none;border:0px to buttons.
also the css selectors are div#yes button{..} and div#no button{..} . hopes it helps
Add this as css,
button[type=submit]{border:none;}
Just use:
button{border:none; outline:none;}
The usual trick is to make the image itself part of a link instead of a button. Then, you bind the "click" event with a custom handler.
Frameworks like Jquery-UI or Bootstrap does this out of the box. Using one of them may ease a lot the whole application conception by the way.
You can target the button in the CSS styling like so:
div button {
border: none;
}
$(".myButtonClass").css(["border:none; background-color:white; padding:0"]);
I am using this CSS to remove dotted borders which appear when hyperlinks are clicked
a:active, a:focus, input {
outline: 0;
outline-style:none;
outline-width:0;
}
This is working fine, but doesn't work on input buttons which have background images.
It's not my place to question your design decisions, so here you go.
Just add this to any link's you want to remove the dotted line
onfocus="if(this.blur)this.blur()"
It isn't working fine. It is rendering it impossible to navigate the design without a mouse.
See http://24ways.org/2009/dont-lose-your-focus for a reasonable compromise.
You could add an onclick: blur(); so it keeps it tab-happy and doesn't ruin the design when clicked.
But for the record, this seems to work cross browser. The first part for IE, the second for FF:
input, input:active, input:focus{
outline: 0;
outline-style:none;
outline-width:0;
}
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: none;
}
You need classes to differentiate which links have dotted borders and which do not. Using the img selector won't be enough.
Style your input tags to not have dotted borders; you could even use a class for your input buttons if you have more than one style (Clear, Submit, Cancel, etc.)