IE11 Broken or over-spill border/outline

Question

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:

The css posted makes quite a different textarea than shown in the `.gif` — SuperDJ, Aug 21 '18 at 13:00
Possible duplicate of [How to remove border (outline) around text/input boxes? (Chrome)](https://stackoverflow.com/questions/3397113/how-to-remove-border-outline-around-text-input-boxes-chrome) — Adeel Imran, Aug 21 '18 at 13:11
@AdeelImran Two things: if you're going to close a question as a duplicate, make sure you are not using a question as a target that has also been closed as a duplicate. Also, that question is specifically about a problem in Chrome. This question specifically says there is *no* problem in Chrome. — TylerH, Aug 21 '18 at 16:02
@TylerH understood, thank you. I'll keep that in mind next time. :) — Adeel Imran, Aug 21 '18 at 17:39

score 1 · Answer 1 · answered Aug 21 '18 at 13:19

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>

Hi @Johannes many thanks for your reply. I have just commented on SuperDJ's answer and advised that the actual code I had to add to my CSS to fix is: **overflow: 'hidden'** — ASF, Aug 22 '18 at 09:22

score 0 · Answer 2 · answered Aug 21 '18 at 13:07

0

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>

answered Aug 21 '18 at 13:07

SuperDJ

7,488
11
40
74

Thanks @SuperDJ for your help. My CSS was in fact not specifying a hidden overflow which caused the isseu. Why? I don't really know. The code I used to resolve it: **overflow: 'hidden'**. – ASF Aug 22 '18 at 09:20
@ASF you should add that as a answer and mark it as such. that will help other users – SuperDJ Aug 22 '18 at 09:21

score 0 · Answer 3 · answered Aug 22 '18 at 09:27

0

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.

answered Aug 22 '18 at 09:27

ASF

11
1

IE11 Broken or over-spill border/outline

3 Answers3