Achieve "::-moz-focus-inner {border:0;}" in javascript

Question

I'd like to remove the ugly focus outline on an input button in firefox. I've tried adding ::-moz-focus-inner {border:0;} as style in my html, which works initially, but not when button elements are re-created via javascript.

I've tried:

cell.style.mozFocusInner.border = "0";
cell.style["-moz-focus-inner"] = "{border:0}";
cell.style["-moz-focus-inner"]["border"] = "0";

etc.

In general, how do I "map" css to javascript?

Answer 1

According to the CSS property to IDL attribute algorithm, a -moz-focus-inner would be camelCased to MozFocusInner. So you could use one of

element.style.MozFocusInner = value;
element.style.setPropertyValue('-moz-focus-inner', value);
element.style.setProperty('-moz-focus-inner', value);
element.style.setProperty('-moz-focus-inner', value, '!important');

But there is a big problem: -moz-focus-inner is not a CSS property, is a pseudo-element.

Given an element, you can read the computed styles of its pseudo-elements via getComputedStyle:

getComputedStyle(element, '::-moz-focus-inner').borderTopWidth; // 1px

However, you can't set them directly. If you want to do that, you can:

• Conditionally set the desired styles in a stylesheet, and use JS to trigger that condition whenever you want. For example, add a class.

  document.getElementById('enable').addEventListener('click', function() {
    document.getElementById('target').classList.remove('no-focus-inner');
  });
  document.getElementById('disable').addEventListener('click', function() {
    document.getElementById('target').classList.add('no-focus-inner');
  });

  .no-focus-inner::-moz-focus-inner {
    border: none;
  }

  <ol>
    <li><button id="enable">Enable inner outline</button> or <button id="disable">Disable inner outline</button></li>
    <li>Press Tab key</li>
    <li><button id="target">Focus me to check if I have inner outline</button></li>
  </ol>

• Create a new stylesheet with the desired rulesets, and append it to the document.

  var styleSheet = document.createElement('style');
  styleSheet.textContent = '#target::-moz-focus-inner { border: none; }';
  document.getElementById('enable').addEventListener('click', function() {
    if(styleSheet.parentNode) document.head.removeChild(styleSheet);
  });
  document.getElementById('disable').addEventListener('click', function() {
    document.head.appendChild(styleSheet);
  });

  <ol>
    <li><button id="enable">Enable inner outline</button> or <button id="disable">Disable inner outline</button></li>
    <li>Press Tab key</li>
    <li><button id="target">Focus me to check if I have inner outline</button></li>
  </ol>

Answer 2

Maybe this works without javascript: https://css-tricks.com/forums/topic/button-padding-issue/

::moz-focus-inner is a pseudo-element. In this link are several ways how to modify pseudo-elements dynamically (with javascript) http://pankajparashar.com/posts/modify-pseudo-elements-css/

cited from http://pankajparashar.com/posts/modify-pseudo-elements-css/ :

<p class="red">Hi, this is a plain-old, sad-looking paragraph tag.</p>

.red::before {
    content: 'red';
    color: red;
}

Method 1

Write separate classes attached with pseudo element for each style and then using JavaScript or jQuery toggle between these classes.

.green::before {
    content: 'green';
    color: green;
}

$('p').removeClass('red').addClass('green');

... 

Common css-styles (not pseudo-elements) can be modified using javascript like this:

cited from https://www.kirupa.com/html5/setting_css_styles_using_javascript.htm :

Every HTML element that you access via JavaScript has a style object. This object allows you to specify a CSS property and set its value. For example, this is what setting the background color of an HTML element whose id value is superman looks like:

var myElement = document.querySelector("#superman");
myElement.style.backgroundColor = "#D93600";

To affect many elements, you can do something as follows:

var myElements = document.querySelectorAll(".bar");

for (var i = 0; i < myElements.length; i++) {
    myElements[i].style.opacity = 0;
}

In a nutshell, to style elements directly using JavaScript, the first step is to access the element. I am using the querySelector method to make that happen. The second step is just to find the CSS property you care about and give it a value. Remember, many values in CSS are actually strings. Also remember that many values require a unit of measurement like px or em or something like that to actually get recognized.