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?
Related
I may not have described the issue accurately with the title, but it's easier to explain here:
I have a button that has an icon image contained within it. I need to get rid of the grey box around that icon and keep the icon itself, along with the button functionality. I assigned the button a second class called "nogray", and in my styling sheet I set opacity to 0.
However, this got rid of the entire button, along with the little orange trash bin icon, which I need to be visible. Essentially, I need the button to function the same way, just with the orange icon and no grey box. In this screenie, you can see the buttons at the top of each bulletin note.
Here is the button code in the bulletin notes view:
<button class ="remove-card nogray" id="#item.BulletinId" type="button"><i
class="fa fa-trash"></i></button>
And here is the css for the button:
i.fa.fa-trash::before {
content: "\f1f8";
}
.remove-card.nogray {
opacity:0;
}
(i.fa.fa-trash::before targets the trash icon, and .remove-card.nogray targets the outer gray area. However, I suspect that the latter is targetting the entire button because setting the opacity to 0 affects both gray area and icon.
How would I tweak the button code so that the opacity is 0 only for the grey, and not the icon? I've tried changing the order of the code element by element, but a lot of it is guesswork because this is a team effort and I did not personally write the button code. I'd also like to apologize in advance if this is an impossible question to answer; if there's some detail you need to know, please tell me and I will edit this to include it.
Thank you very much for any suggestions!
I realized I was targeting the wrong lines of code in my css. There was an ActionLink that a teammate commented out, and I assigned the classes from that to my original button code and was able to target the button that way instead.
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 am using a Qstylesheet to control the behavior of some QPushButtons and QToolButtons. When I hover over them, they turn black, as I want them to. However, once I press them, they turn a funny greyish reddish color, and there is a red box drawn inside of them.
What is the property or pseudo state that I have to set in order to avoid this behavior? I have been through all the properties related to selection, and background, and cant get this to go away
Without seeing your style it's a little difficult to fix your problem. So what I'll do is explain a little how things work, and hopefully you can decide how best to address your problem.
First, it's important when your styling your button to ensure that you cover all your bases. I'm sure you know most of this, but just in case...
A QPushButton and QToolButton have a number of states that can be styled, so you want to make sure that you make your button noticeably different for each state so that the user can tell the difference.
QPushButton
{
// The default look of your button
}
QPushButton:disabled
{
}
QPushButton:pressed
{
}
QPushButton:focus
{
}
QPushButton:hover
{
}
QPushButton:checked
{
}
Use things like the background color, foreground color, border color, and generally you are good to go.
background-color: red;
color: white; // foreground color
border-width: 1px;
border-color: black;
The second thing to know is this, styles can be inherited. So be really careful when you add a style to a widget. When you create a style try to be specific. If you give this style to something in your UI, the background color will be blue, but the dangerous thing, is that all child widgets of this one will also inherit this style.
QWidget
{
background-color: blue;
}
Maybe that's what you want, but often not. So if you are styling buttons always put the QPushButton or QToolButton selector around them, the same should apply for other things you are styling too. So it's possible that's where your greyish reddish color is coming from.
Now, the last thing to know about styling buttons is the focus rectangle. It is the irritating dotted line that appears when your button has been focussed. See the picture below.
The unfortunate thing is that there is there is no way to style the focus rectangle using style sheets. But you can get rid of it, if that's what you want. See the following link:
Getting rid of the focus rectangle
So, in summary...
Make sure that your button style covers all the states that you
need.
Make sure that your button isn't influenced by any other
styles you have added to other widgets.
Either change, or get rid
of the focus rectangle as needed.
I hope that helps. If you want more specific help, then please post your style, and I'll take a look at it.
This is a CSS-Question.
In this fiddle you can see a button.
It has got two span-elements inside. One with float:left; the other with float:right;.
The style is a normal button-style.
When clicking that button on the iPhone or hover it in a Browser the style gets lost.
This is because I changed the background-color.
Is there a way to change the background-color without losing the whole button-style?
EDIT:
Here are the two images: The first button is a normal button-element. The second button is a button where I changed the background-color ... this is what it looks like when I'm hovering over a button.
I think I understand what you mean. It looks like the rounded corner is gone when hovering, while a border is added. I'm afraid there's not a easy way to get what exactly you want, as the behavior & appearance of Button is controled by system.
Maybe you can try to replace it with a div, which you have full control of the style (chaning the style via JS when hovering).
All's working fine for me. However floating-right elements should always be placed before floating-left elements. Don't know if it will change anything.
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.