How to override inline HTML image via css image

Question

I have a problem with a form template I am working on, which has a default inline image.

<input src="//assets.emailmeform.com/images/submit-orange.png?RU1GLTAyLTI3" type="image" alt="Submit" onmouseover="return true;">

Is there any way of overriding this? I have

#ID input[alt="Submit"]{
    background-image: url("url here")no-repeat !important;

However the result was the CSS image that I assigned was under the default inline image. Is there a way to hide the inline image so that the CSS image will appear on top?

<input src="url" type="image" alt="Submit" onmouseover="return true;"> Here is the default inline code for the button. — dinodin
– dinodin, Commented Dec 3, 2015 at 9:22

Alp · Accepted Answer · 2015-12-03 10:20:22Z

1

Please take a look at this solution.

What I basically did there is that I had set the width and height of the image (picture of a sparrow) to 0 so that it would not show up anymore. And instead I had added a background image to replace it (picture of a parrot).

HTML

<input src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/House_Sparrow_mar08.jpg/1024px-House_Sparrow_mar08.jpg" alt="submit" type="image">

CSS

input{
  height: 0;
  width: 0;
  padding: 1000px 1000px;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Ara_ararauna_Luc_Viatour.jpg/1024px-Ara_ararauna_Luc_Viatour.jpg");
  background-repeat: no-repeat;
}

Cheers,

answered Dec 3, 2015 at 10:20

Alp

3,1471 gold badge16 silver badges29 bronze badges

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

Collectives™ on Stack Overflow

How to override inline HTML image via css image

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related