Can anyone tell me why the hell is this happening in Google Chrome? http://jsfiddle.net/webtiago/D2jLr/
An outline means that is a line that is outside something right? When I focus on my input my outline turns an "inline". It shouldn't right? This is happening in several projects I'm working on. I'm using Chrome 19.0.1084.52 m.
Any help?
It just looks like that. Try this I made the lines thicker. The outline is still on the outside.
It moving in 1px looks to be just a Chrome bug.. you can sort of work around it by switching the border and outline colors on focus.
input:focus { border: 1px solid red; outline: 1px solid orange;}
It still moves in 1px but the order of the colors is maintained at least.
Chrome changes outline-offset (which controls the location of the outline) on focus.
Simply use outline: 1px solid blue; outline-offset: 0; and it'll work the way you want it to.
Chrome's outline border is slightly thicker than the border of your input causing it to look like it's on the inside. If this is annoying, you can turn of chrome's outline by:
outline:none;
Demo http://jsfiddle.net/D2jLr/2/
Related
There is some weird white space showing up on the right side of my website in mobile. I was wondering if there is a CSS trick to add a border to all the html elements within the body of a webpage so that I can figure out which element is extending out and causing the white space on mobile.
Thank you
You can try this CSS snippet:
* { border: 1px solid black; }
Every element should now get a border. Beware, this means everything. Hopefuly it'll help you figure out that white space in your app!
Include that CSS snippet before your CSS files so that it can be overwritten - or after, to force it onto every element.
Try with
* {
outline: 1px solid red;
outline-offset: -1px;
}
* is a global selector, while outline will not mess with your elements positions, it'll just add a 1px red outline
Also make sure you use a CSS reset (usually body has by default 8px margin http://www.w3.org/TR/CSS21/sample.html)
You can resize your window, open the debug console and inspect the elements that might create the issue. Take a look at the Style panel and test-edit the styles until you get it fixed. in Chrome's Console you also have the Emulate option to test your page for different devices.
* {
border-style: 2px 3px solid dashed #3A5FCD;
}
Does anybody know a workaround for following 'bug' in webkit?
When I use border-radius and border: solid 1px to create rounded borders on select tag it just works fine on webkit, FF and so on
But when the border more than 1px you can see the container's background overlapping the border.
You can see it here: http://dabblet.com/gist/2909020
(just change border: solid 2px #9ec3d6; to 1px to see the difference)
Thanks for your help!
With -webkit-appearance: none; you can hide the rectangle border, but this will also hide the usual dropdown icon of the select box, but you could add some background images to bring back some kind of visual indicator for the select box.
Look at these examples: http://37signals.com/svn/posts/2609-customizing-web-forms-with-css3-and-webkit
I was wondering if any of you guys know how to show that "dashed line" that appears whenever you hit tab to buttons? I don't know which css code is hiding that. Is is a:active? (assuming this is a css thing?)
Thank you.
input:focus {
border: 1px dashed #000;
outline: none; }
It's the Focus selector that controls it.
The outline CSS property controls the dotted line that you see around input fields when they have focus. Setting the outline to 0 will remove that dotted line.
outline: 0;
For more information, see the following article:
http://css-tricks.com/removing-the-dotted-outline/
I have designed my submit buttons using CSS. In any Webkit or Gecko browser it works perfectly, but Internet Explorer 9 adds padding to the button's text when it is pressed down. In addition, you can see this stupid dotted border. It looks like this then:
http://img6.imagebanana.com/img/tkp7l8m3/button.png
The special background image which I have specified in CSS for input:active is only shown in IE, if the button is clicked in the very thin area between the button's border and this dotted border. If the button is clicked in the middle it keeps the hover-background although it is pressed down.
Can anyone help me remove this extra padding and the dotted border?
Thanks in advance
Qoguth
To get rid of the dotted border you can use pure CSS:
button { outline: none; }
As for padding when clicked, I fear it's part of the internal browser behavior that can't be changed.
Both of the answers given so far are incorrect in an important way. You should only hide the keyboard focus outline on :active, hiding it on :focus too hurts keyboard navigation.
button:active { outline: none; }
As has been stated, the increase in top-left padding is not overridable.
You could try:
/* Swap 1px 6px for your desired top+bottom and left+right padding. */
button { padding: 1px 6px; }
button:active { outline: none; padding: 1px 6px; }
Presuming you actually want padding and not some other property.
button::-moz-focus-inner { border: 0; } works for buttons...
what about for select/option html tag?
i try everything what is here:
How to remove Firefox's dotted outline on BUTTONS as well as links?
but i open new question becouse there is talking about buttons...
select, option {
border: 0 none;
outline: 1px none;
}
always works for me.
Have you tried
select, option {outline:0}
As of Firefox 11.0 the dotted outline around the select, option and button elements no longer exists, as far as I can tell by tests performed under Win7 with FF 11.0, and under Ubuntu 12.04 with FF 12.0.
Also noticed that around links like does of a Google Search Result Pagination Numbers, the dotted outline does not appear for the same versions of Firefox.
Seems to be an issue being dealt with by the Mozilla Firefox.
Made this Fiddle to test it!
select:-moz-focusring { color: transparent; }
This works. It's weird becuase the element you're seeing is :-moz-focusring but even if you use outline or border properties overwriting, the dotted line won't dissapear. Since the dotted line color depends on the color of the select, you can use this pseudo selector to put a transparent color (and make it invisible) but still have the original color in the select box text.
Try this:
select, option {
border: 0 none;
outline: 1px none;
}