How to remove the blue rectangle when element is focused?

Question

How to remove the blue rectangle when element is focused? I've seen similar questions but those question link to an external site. My question includes a snippet that can be tested on SO.

Here is what I get when text area is focused:

Here is what I want when text area is focused:

Here is the code I have so far:

input:focus, textarea:focus {
    outline: none;
}

#textarea  {
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  width:calc(100% - 20px);
  height:160px;
  display:inline-block;
  margin-top:-0.2em;
}

<textarea id="textarea">yo</textarea>

I have already looked at this question.
I have also looked at this question.

https://stackoverflow.com/questions/2258647/changing-the-highlight-color-when-selecting-text-in-an-html-text-input — inxoy, May 11 '18 at 19:44
Thank you. I looked at those and they don't provide a working solution. They use the same code I have mentioned here. I've found an answer though. — 1.21 gigawatts, May 11 '18 at 19:56
The question linked is the same question. I've copied over my answer. This question can be closed. — 1.21 gigawatts, May 11 '18 at 20:37

score 0 · Answer 1 · answered May 11 '18 at 19:52

0

Try this:

input:focus, textarea:focus {
   outline: none !important; }

answered May 11 '18 at 19:52

Behzod

21
3

This didn't make any changes for me. – 1.21 gigawatts May 11 '18 at 20:28
I found the problem. It does work in Safari but not in Firefox. Setting the border to 0 removes the border completely in Firefox. It seems matching the text area border make it appear that the focus outline is gone but it is actually switching borders to the same border style. See my answer. – 1.21 gigawatts May 11 '18 at 20:56

1.21 gigawatts · Answer 2 · 2018-05-11T20:58:56.370

0

This solution changes the defined border value of the focus style for the selected elements. I've effectively made the focus border match the text area border:

input:focus, textarea:focus {
    outline:none;
    border:1px solid gray;
}

#textarea  {
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  width:calc(100% - 20px);
  height:160px;
  display:inline-block;
  margin-top:-0.2em;
}

<textarea id="textarea">yo</textarea>

edited May 11 '18 at 20:58

answered May 11 '18 at 20:03

1.21 gigawatts

16,517
32
123
231

1

... or just don't screw with the accessibility of your website and add a real focus style. "[*If an element can be interacted with, it must have a visible focus indicator. Provide obvious focus styling if the default focus style is removed.*](https://developer.mozilla.org/en-US/docs/Web/CSS/outline)" – str May 11 '18 at 20:05
I appreciate your response but you don't know my purpose. My site is actually for accessibility lol. It's a text to speech screen reader. When text is read each word is highlighted. The textarea has to be focused for the word to be highlighted but it's not the subject of focus. The current spoken word is the focus. Check it out https://stackoverflow.com/questions/50284816/is-it-possible-to-select-the-word-that-is-being-read-while-using-the-speechsynth – 1.21 gigawatts May 11 '18 at 20:11

How to remove the blue rectangle when element is focused?

2 Answers2