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/
Related
textarea {
outline: none;
}
<textarea></textarea>
This issue is really bugging me and still can't find a solution, why is my textarea broken or showing black or blue outline randonmly? I have no issues in Chrome. It can be removed by mouse click... this is how it is in IE below gif:
Broken outline or border:
That's because the textarea gets the focus as soon as you select it/click on it. You can prevent that by applying a regular border setting to textarea:focus, but this is not recommended, since the highlighting of the focused element is essential for the accessibility of websites in general.
(Depending on the browser you also might want to add outline: none and box-shadow: none) since different browsers handle the focus highlighting differently.
textarea:focus {
border: 1px solid black;
}
<textarea></textarea>
Maybe you can try the following, it makes sure the user can't highlight the textarea.
textarea {
outline: 0;
user-select: none;
-ms-user-select: none;
}
<textarea></textarea>
The solution I found that fixed the issue in the end was adding this to the CSS:
overflow: 'hidden'
I hope this helps others in the future.
when I focus my input with border-radius, a square border appears out.
Can i make this second border dispear or just set a border radius to it?
input[type="text"]{
border: 1px solid red;
border-radius:10px;
}
<input type="text">
This is the square border:
Thanks.
The blue rectangle is referenced as outline you can hide it via the outline: none rule
input[type="text"] {
border: 1px solid red;
border-radius:10px;
}
input[type="text"]:focus {
outline: none
}
<input type="text">
Of course you can style it.. See this doc to see applicable rules.
*UPDATE*: In my answer I assumed that the question was about removing the outline of the HTML element to provide a custom one. As #Antifish made me notice this is a bad practice unless you don't provide alternative styles.
I looked up for some extra resources and found out someone made a website about this and it's clearly stated that:
Defining focus to navigation elements is an accessibility requirement, it's clearly stated in the Web Content Accessibility Guidelines:
2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)
Just add outline:none; to your input.
input[type="text"]{
border: 1px solid red;
border-radius:10px;
outline:none;
}
<input type="text">
Just add outline:0px none; to your input.
input[type="text"]{outline:0px none;}
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/
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;
}