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
61

Yes, the focus issue is there on a clean install, and the config setting is still false when that issue occurs.

You can do something to remove that dotted outline by applying the following CSS code:

button::-moz-focus-inner {
  border: 0;
}

Do you see the problem on this jsfiddle?

62

If this is a bug on firefoxes end can you file it as a bug on Bugzilla?

63

Can this be added to my above code? not in the css section?

button::-moz-focus-inner {
  border: 0;
}
64

Does it have to be added to the css, can I add it to the html part?

65

best to fix it in the actual css file of the browser - it is fixiing a browser bug and not a specifiic web page.

66

No pseudo elements don’t exist in the html as such and that code can only go in a css file (just like :hover effects). It cannot be added in an inline style attribute.

3 Likes
67

Yes you can, in a style tag element.Note: not a style attribute, but a style tag.

68

Are you going to report this as a bug on bugzilla?

69

It is not a bug - it is deliberate by design as assistance for people with impaired abilities.

3 Likes
70

Really? So then It’s something they implemented in 49 then.

How exactly does it help people?

71

It make it easier for people using the keyboard for navigation to figure out what has focus on the screen and where.

3 Likes
72

Why do you think that it’s new with 49?

73

Like this then?

<style>
button::-moz-focus-inner {
  border: 0;
}
</style>
74

Yes.

75

How would I add that to this?

<style> button::-moz-focus-inner {border: 0;} </style>

<div style="width:0;" onclick="myscr3=document.getElementById('myscroll3'); myscr3.style.display='block'; this.style.display='none'">

<a href="http://makeavoice.com/shoutcast/websitecodes/songhistory.php?ip=hi5.1980s.fm&amp;port=80&amp;refresh=50&amp;fontcolor=0059dd&amp;bgcolor=000000" style="cursor: pointer;display:block;
width: 260px; height: 144px; background: #000; border: 3px solid transparent; border-image:linear-gradient(to right, #f0f 0px, #f0f 184px,#fff 0px, #fff 192px, #0ff 0px, #0ff 100% ); border-image-slice: 1; background-color:transparent; color:transparent; font-family:Tahoma; font-weight: bold;font-size:30px; color:#0059dd;text-align: center;line-height:100px;text-decoration: none;" target="frame3">Song History</a></div>

<div id="myscroll3" style="display: none;">
<iframe style="display:block;" frameborder="0" name="frame3" height="150" width="266" ></iframe>
</div>
76

It looks like you already have.

77

there’s a dotted line around it when you press mouse down on it

78

Though <style> tags should be within the <head> element.

79

Get rid of the button part from the CSS declaration.

80

what if their not? what happens?