The attached screenshot is from OS X/Firefox 3. Note that the center tab (an image) has a dotted line around it, apparently because it was the most-recently selected tab. Is there a way I can eliminate this dotted line in CSS or JavaScript? (Hmmm...the free image hosting service has reduced the size of the image. But if you could see it, you'd notice a dotted-line select area around the block.)
Screen Shot http://www.freeimagehosting.net/uploads/th.fadf78173b.png
You'll want to add the following line to your css:
a:active, a:focus { outline-style: none; -moz-outline-style:none; }
(Assuming your tabs are done using the a element, of course.)
[edit] On request from everyone else, for future viewers of this it should be noted that the outline is essential for keyboard-navigators as it designates where your selection is and, so, gives a hint to where your next 'tab' might go. Thus, it's inadvisable to remove this dotted-line selection. But it is still useful to know how you would do it, if you deem it necessary.
And as mentioned in a comment, if you are only dealing with FF > v1.5, feel free to leave out the -moz-outline-style:none;
In your onclick event, this.blur()
or, specifically set focus somewhere else.
For starters, try this
*,*:hover,*:focus,*:active { outline: 0px none; }
This will however decrease usability.
You'll want to selectively apply alternative effects where relevant to give people such as those whom navigate primarily with the TAB key have an idea of what currently has focus.
div.foo:active,
div.foo:focus,
div.foo:hover
{
/* Alternative Style */
}
You can start by looking at the :focus and :active pseudo classes, although you probably shouldn't be completely removing any formatting from these cases, since they are an invaluable usability aid.
using
*:focus {outline:0px;}
will remove styling for inputs and textareas when selected with the mouse. Make sure you append these styles with a border for these form items if you choose to remove all outlines on :focus.
Related
Problem
I have a MenuItem that by default is initialized with drop shadow—which I’d rather not have. I’ve got a css file set up, but can’t seem to figure out what’s necessary to remove the drop shadow.
See how there's a rather ugly drop shadow down below that? I'd like the whole menu button to be flat, containing no borders nor shadows whatsoever.
The reason the background color of the various different elements in the image are red is due to my attempts in styling it differently—the background color does indeed work the way I’d expect it to.
What I’ve tried so far
.menu-item
{
-fx-effect: null;
-fx-drop-shadow: null;
}
Neither one of the properties seem to effect the outcome of my program.
I've also tried styling the menu, but that only appears to style the actual “Plugins” button.
Moreover
I can’t seem to think of any better solutions compared to those I’ve already tried. Perhaps someone can point me in the right direction?
Once again, I’m attempting to make the menu items look flat.
You need to add the effect to the context menu, e.g.
.menu-bar .context-menu {
-fx-effect: null;
}
BTW: There is no -fx-drop-shadow property.
I have read the answers to the other [very] related questions, but I thought I would pose it again since polymer updates might have been made.
I can change all the colors in [dart] paper-scaffold (core-scaffold) - the menu and toolbar, but I cannot change the color of the header across the top. It is always background-color=#526E9C. The only way I can do it is change the core-toolbar style in the generated (using pub build) index.html. And this one line change sets the color across the whole header across the browser window (which is what I want). So I can get by.
When I do style:
core-toolbar{
background-color: #7A418D;
color: #FFF;
}
it only changes the color above the drawer, and not across the whole top. It's very mysterious why it just does that bit!
I have tried shadow-shim, core-scaffold::shadowdom.. etc. I have tried changing the /src/ core-scaffold.html - and more, where this pervasive value #526E9C appears.
In my website (sekpa.org) it shows this blue (#526E9C) half.
Is it just a bug? If it is, I'd be very happy in that knowledge!
Thanks Steve
There are two core-header-panels inside a paper-scaffold.
Each core-header-panel contains one core-toolbar.
The left collapsible core-header-panel as well as its inner core-toolbar are sitting in the normal Light DOM, and that's why you can change its color by specifying the css like that.
However, the right core-header-panel and core-toolbar are inside paper-scaffold's Shadow DOM. In order to change the color of this core-toolbar, you need to do something like -
paper-scaffold::shadow core-toolbar {
background: #7A418D;
color: #fff;
}
For more info, please refer to this link.
I'm new to web programming, recently I've been asked to make some home pages for someone.
Unfortunately I've run into some problem, the homepage will be on a touch screen for touch input, I've got reports like buttons most of the time doesn't work when clicked on, one of my suspects is invisible borders caused by PNGs.
TL;DR - http://puu.sh/6HQez.jpg The corner of the red button is being blocked by the invisible border of the purple button, are there any ways to fix that?
EDIT: No I'm not asking for how to remove the dotted line, I made them visible to show you.
It seems like what you are referring to is not an 'invisible border' but an 'invisible background'.
Your PNG files are rectangular shaped when it comes to event handling, even if some parts are transparent.
If you need to disable some elements from being clicked, you can go about it few ways:
Disable pointer-events with CSS to make sure that a specific
element does not caputre clicks.
#mypurplediv {pointer-events: none;}
Use Z-index to decide the hierarchy of your elements:
#mypurplediv {z-index: 0;}
#myrediv {z-index: 1;}
EDIT:
Per your comments, it seems that you need to retain the abiity to click on ALL elements.
As I mentioned above , your current PNGs are actually rectangles with some parts being transparents.
So you have these options:
1) Use SVG which are vector based shapes (that will by default not have invisible backgrounds). Good tutorial here.
2) Use image mapping and area to create your shapes and give them href. This is a good tutorial about image mapping.
example - <area shape="poly" coords="74,0,113,29,98,72,52,72,38,27" href="index.htm">
3) Use 3rd party javascript/jQuery libraries such as ImageMapster.
Hope this helps!
That dotted border is called focus outline. You can turn it off by applying CSS to the image.
img { outline: none; }
I'm trying to fix something another developer did on this site: http://alamodecreamery.com/products-page/accessories/girls-atom/
If you hover over the sizes a waffle icon appears, however when the item is checked (radio button) the background disappears. I need a label:checked background to show the waffle. I found the CSS selector on line 1150 of wpsc-default.css and added a label:active for testing which works fine (aqua on active).
Can anyone figure out why the :checked background isnt working? Ive tried a few different things which all failed to work:
label + input[type="radio"]:checked {
background:pink !important;
}
input[type="radio"]:checked {
background:pink !important;
}
.wpsc_variation_forms label:checked {background-color: green !important;}
Thanks in advance!
What you are attempting cannot work. You have a structure in which the radio input is contained inside the label. The label is sized to match the waffle, and on hover changes its background. When the radio button is checked, the input gets the :checked state, not the label! And in CSS, right now, it is regrettably not possible to select an element based on a descendant's state. As such, it is not possible with pure CSS to change the appearance of the label based on a pseudoclass of one of its contained elements.
I would recommend adding a bit of Javascript which toggles a class on the label when the radio button is toggled, would be the easiest fix.
Techy sidenote: there have been multiple proposals in the past for 'parent selectors', and all have been shot down by the browser developers because it was unfeasible from a performance perspective due to the way the DOM and CSS are matched up. Nowadays the engines are so efficient the discussion has been restarted, but still in very preliminary stage. Don't expect anything before CSS4 surfaces.
label:checked is invalid. checked is for inputs only.
Something like
wpsc_variation_forms label + input:checked
might work better
Is there a way to get rid of the selection rectangle when clicking a link which does not refresh the current page entirely?
Do you mean the dotted outline of a target?
Try:
:focus {
outline: 0;
}
This would remove all focus outlines. IT's essentially the same as onclick in JavaScript terms. You might prefer to apply this to a:focus.
Try adding this:
onclick="this.blur()"
Discussed here as well
(CSS?) Eliminating browser's 'selected' lines around a hyperlinked image?