How can I remove an anonymous inline – indextwo Sep 10 '21 at 14:01

Question

As long as the <style> block contains something uniquely identifiable, then it's relatively straightforward to remove. Using jQuery to loop through all the <style> blocks in the page, you can then check their content for the offending selector and remove the entire block:

$('style').each(function(index, elem) {
    let styleBlock = $(this);
    let content = styleBlock.text();

    if (content.indexOf('.widget-form') > -1) {
        //  Found an inline style block - let's kill it!

        styleBlock.remove();
    }
});

You can also do this in a very similar way with plain JS:

var styles = document.querySelectorAll('style');

Array.prototype.forEach.call(styles, function(el, i) {
    let content = el.textContent;

    if (content.indexOf('.widget-form') > -1) {
        //  Found an inline style block - let's kill it!
        
        el.remove();
        // Or el.parentNode.removeChild(el); for maximum backwards compatibility
    }
});

indextwo · Accepted Answer · 2021-09-10T13:54:21.900

As long as the <style> block contains something uniquely identifiable, then it's relatively straightforward to remove. Using jQuery to loop through all the <style> blocks in the page, you can then check their content for the offending selector and remove the entire block:

$('style').each(function(index, elem) {
    let styleBlock = $(this);
    let content = styleBlock.text();

    if (content.indexOf('.widget-form') > -1) {
        //  Found an inline style block - let's kill it!

        styleBlock.remove();
    }
});

You can also do this in a very similar way with plain JS:

var styles = document.querySelectorAll('style');

Array.prototype.forEach.call(styles, function(el, i) {
    let content = el.textContent;

    if (content.indexOf('.widget-form') > -1) {
        //  Found an inline style block - let's kill it!
        
        el.remove();
        // Or el.parentNode.removeChild(el); for maximum backwards compatibility
    }
});

You can just use `forEach` directly on `styles` in modern browsers. — Heretic Monkey, Sep 10 '21 at 13:36
@HereticMonkey - absolutely. In this case, the client is known for using archaic browsers, so I went for maximum compatibility. — indextwo, Sep 10 '21 at 13:58

score 0 · Answer 2 · answered Sep 10 '21 at 12:47

0

just put it on your css file

.widget-form button {
  border: unset;
  float: unset;
}

.widget-form input {
  background: unset;
}

add !important if necessary

answered Sep 10 '21 at 12:47

ANDO Andriamalala

308
1
7

Inline styles will always have a higher specificity than the stylesheet; and see my original question about the issues with using `!important` for everyhing. While technically I _could_ add a higher specificity to my CSS, there are around 100+ rules - I didn't include all of them here for the sake of MCVE. – indextwo Sep 10 '21 at 12:51

score 0 · Answer 3 · answered Sep 10 '21 at 13:54

0

then try this

$( "<html>*/</html>" ).appendTo( "style:last-of-type" );
$( "<html>/*</html>" ).prependTo( "style:last-of-type" );

the selector changes according to your index file

answered Sep 10 '21 at 13:54

ANDO Andriamalala

308
1
7

3 Answers3