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.
Related
I have the following style class for button -
.buttonStyleClass {
padding:5px 20px;
}
When I try to focus the button in Firefox, then focus outline is appearing inside the button after padding. But when you verify the same in Chrome you will find the focus to entire button including padding.
In my application focus outline seems to odd in firefox since it is appearing 20 pixels inside of button.
Is there any CSS fix for this issue ?
Thanks,Gopal
Actually in both Firefox and Chrome I see the outline OUTSIDE of the button... Check out this fiddle. You can easily hide the outline though:
.buttonStyleClass { outline: 0; }
If this is not the answer; could you provide us with a fiddle or screenshot of what you mean?
edit
It's probably a bit OS-specific, as I only saw the dotted (inner) outline when I added a explicit border to the button (button { border: 1px solid red; }).
You can remove, or alter, the outline with the :-moz-focus-inner selector, like this:
button::-moz-focus-inner { border:0; padding: 0; }
Also check out the updated fiddle
I realize this is a very old question, but no one has actually answered the question yet, and several people have given bad advice. Given I got here via Google, other people may come here and leave with that bad advice.
For accessible reasons, you should never remove styling like this, unless you replace it with something better.
Instead of:
button::-moz-focus-inner {
border:0;
padding: 0;
}
Try:
button::-moz-focus-inner {
padding: inherit;
}
Try out this
button { padding: 10px; border: 1px solid red;}
button.no-outline { border: 1px solid blue; }
button.no-outline::-moz-focus-inner { outline: none; border:0; padding: 0; }
button.better-outline {border: 1px solid green; }
button.better-outline::-moz-focus-inner { padding: inherit; }
<button>my button</button>
<button class="no-outline">without outline</button>
<button class="better-outline">with better outline</button>
Add this to your CSS.
.buttonStyleClass:active {
outline: 0;
}
Are you viewing this in a web browser? You said 'application' in your query.
If I understand correctly you are saying that:
Chrome : outlines around the button area inside padding.
Firefox : outlines the area outside padding.
This is a browser specific rendering problem.
Two solutions come to mind.
Don't use padding for you button instead use:
.buttonStyleClass {
height:50px;
line-height:50px;
text-align:center;
}
Alternatively use -webkit targeting to write specific browser css markup.
http://jsfiddle.net/JV6MH/4/
This fiddle should render focus outline the same in both firefox and chrome by avoiding the use of padding on buttons.
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/
EDIT: As #geca noted in the comments, this is a known WebKit bug. Let's hope it gets fixed soon!
The ::selection pseudo-element allows one to style the selected text. This works as expected but not for textareas and inputs in Google Chrome 15.
(I'm not sure if it's a webkit or chrome issue since I can't use Safari on Linux.)
Here's a jsfiddle demonstrating this issue: http://jsfiddle.net/J5N7K/2/
The selected text at the pargraph is styled as it should be. The selected text in the textarea and input isn't. (But it is at Firefox.)
Am I doing something wrong or is it just not possible to style it at Chrome right now?
Is a <div> with contenteditable an option? Functions just list a <textarea> for most things.
Demo: http://jsfiddle.net/ThinkingStiff/FcCgA/
HTML:
<textarea><textarea> Doesn't highlight properly in Chrome.</textarea><br />
<input value="<input> Doesn't highlight properly in Chrome." />
<p><p> Highlights just fine in Chrome!</p>
<div id="div-textarea" contenteditable><div contenteditable> Highlights just fine in Chrome!</div>
CSS:
textarea, input, p, div {
width: 400px;
}
#div-textarea {
-webkit-appearance: textarea;
height: 32px;
overflow: auto;
resize: both;
}
::selection {
background-color: black;
color: white;
}
Output (Chrome):
This is a known WebKit bug. Sorry, no solution thus far :)
Update: the WebKit bug was fixed on 10/13/2014.
Is there any chance that instead of using CSS pseudo-element you can use some jQuery.
take a look at this http://jsfiddle.net/J5N7K/6/.
if you don't understand the jQuery feel free to ask about it.
use this :
::-moz-selection {
background: var(--blue);
color: var(--white);
}
::selection {
background: var(--blue);
color: var(--white);
}
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;
}