Firefox 49 just added color to button link. How to make it invisible? Also, does anyone think this is a bug in Firefox 49?

JavaScript
1

Is there a way I can make it invisible?


Also, does anyone think this is a bug in Firefox 49?

<button id="playButton" style="display:block;width: 606px;height:50px;border-radius:50px;background-image: linear-gradient(  to right,#000000 199px,#0059dd 199px, #0059dd 202px, #000000 202px,  #000000 399px, #0059dd 399px, #0059dd 402px,  #000000 402px  );border: 3px solid #0059dd; cursor: pointer;font-family: Tahoma; font-weight: bold;font-size:23px; color:#000000;"
onclick="  
var button = document.getElementById('playButton');
  var player = document.getElementById('player'); player.volume=1.0;
  if (player.paused) {
    playButton.innerHTML = '1980s.fm';
    playButton.style.background = 'linear-gradient(  to right,  #00ffff 199px,#0059dd 199px, #0059dd 202px,  #ffffff 202px,  #ffffff 399px, #0059dd 399px, #0059dd 402px,  #ff00ff 402px  )';
    player.play();
  } else {
    playButton.innerHTML = '';
    playButton.style.background = 'linear-gradient(  to right,  #000000 199px,#0059dd 199px, #0059dd 202px,  #000000 202px,  #000000 399px, #0059dd 399px, #0059dd 402px,  #000000 402px  )';
    player.pause();
  }">
</button>

<audio id="player" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg' />
</audio>
2

I don’t see the blue color, #01FFFF, in FF49. You will have to look elsewhere in your code.

Do you have Firebug installed in Firefox?

3

These are all my addons. They all come with the browser except for shockwave flash.

4

It wasn’t happening in firefox 48.

5

And it doesn’t happen in internet explorer 11.

6

the dotted link line was invisible in firefox 48.

7

that looks like an outline - it appears wherever in the page has the focus for keyboard input - in this case hitting enter on the keyboard will click the button.

8

In firefox 48 it was invisible, 49 was released today and now it’s visible.

9

Does anything in here say anything that was changed that relates to this issue?

10

It’s a vital usability improvement.

If you don’t like it you can turn it off, by making the focus outline invisible:

button:focus{
    outline: none;
}

Does it still appear on this updated jsfiddle?

11

Yes it does. When you click on it it appears.

12

I have just downloaded and installed Firefox 49, and don’t see it on there.

You’ll need to figure out which of your extensions are responsible for your issue, before anything further can be done.

13

this is everything: All I added was adobe flash.

14

You have already posted that list. Restart Firefox with add-ons disabled and see if the problem still exists.

BTW - I do not see any colors at all.

15

What I’m dealing with relates to html 5. Has nothing to do with adobe.

16

In about:config (type it in the address bar) there is a setting that causes me to see your same problem:

browser.display.focus_ring_on_anything      false

When it’s true, you see the dotted outline. When it’s false, you don’t.
The default is false. If something has changed yours to true, change it back to false.

17

Was this a change firefox made for firefox 49?

18

No it wasn’t.

19

How come firefox 48 had no dotted line, and in 49 there was a dotted line?

20

That is something that is unique to you.

Firefox has had that setting since 2001. You can read all about it in this 2006 article on the setting: http://kb.mozillazine.org/Browser.display.focus_ring_on_anything