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

Aloso · Accepted Answer · 2017-03-27 20:47:02Z

0

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

answered Mar 27, 2017 at 20:47

Aloso

5,5324 gold badges27 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

UncaughtTypeError · Accepted Answer · 2017-03-27 21:07:02Z

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

Collectives™ on Stack Overflow

Override submit button image using css

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related