Override submit button image using css

Question

I am working on a CSS userstyle and the problem is that I can't seem to modify images in buttons coded into a web page's html code:

<button type="submit" class="btn btn-default"><img alt="Ico-plus" src="//s.theoldreader.com/assets/ico-plus-369f50fa00968793b3c2e814f3e55de5.png"><i class="fa fa-spinner fa-spin" style="display:none;"></i></button>

the closest i can get to changing this through CSS is to change the code of the actual button and change its background through .subscribe-button-container .subscribe .dropdown-menu li form .control-group button{background-image:url("http://i.imgur.com/XYHilSy.png");}, rather than replace the image contained within it. It is possible to achieve what I am trying to do, or are such images simply hardcoded into the HTML?

I read these: How to change an input button image using CSS?

Adding an image to submit button using CSS

Submit Button Image

but they all assume that I can modify the html code, while I can only try to override the css

score 0 · Answer 1 · answered Mar 27 '17 at 20:47

You cannot modify HTML with CSS, you can only modify the appearance of HTML. Since the image url of an <img> is specified in HTML, you can't change it.

Here's what you can do:

Hide the image (display: none or opacity: 0)
Specify a background image for the button

score 0 · Answer 2 · answered Mar 27 '17 at 21:07

Using a pseudo element as a sort of "stand-in" image tag may be worth exploring.

This solution will provide you with more flexibility in regards to styling this element in ways that wouldn't be possible with background images.

Think of the :pseudo-elementin this case as your "artificial img element" which serves as the "replacement" for the original img element you have now hidden.

.btn img {
    display: none;
}

.btn:before {
    content: "";
    display: block;
    background: url(https://s.theoldreader.com/assets/ico-plus-369f50fa00968793b3c2e814f3e55de5.png);
    max-width: 18px;
    max-height: 18px;
    width: 18px;
    height: 18px;
}

<button type="submit" class="btn btn-default"><img alt="Ico-plus" src="//s.theoldreader.com/assets/ico-plus-369f50fa00968793b3c2e814f3e55de5.png"><i class="fa fa-spinner fa-spin" style="display:none;"></i></button>

MDN

::before creates a pseudo-element that is the first child of the element matched. It is often used to add cosmetic content to an element by using the content property. This element is inline by default.

https://developer.mozilla.org/en-US/docs/Web/CSS/::before

Override submit button image using css

2 Answers2