CODEWITHSUNDEEP
htmlcssinternet-explorer-11
ASF
ASF

Reputation: 11

IE11 Broken or over-spill border/outline

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:

enter image description here

Upvotes: 0

Views: 526

Answers (3)

ASF
ASF

Reputation: 11

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.

Upvotes: 0

Johannes
Johannes

Reputation: 67748

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>

Upvotes: 1

SuperDJ
SuperDJ

Reputation: 7661

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>

Upvotes: 0

Related Questions