Replace a img using only CSS and cannot change HTML

Question

I'm working on a project that has 2 different CSS, one light and one dark. And a few images are inside the <img> tag, and I need to change their colors, only using css, since I'M NOT ALLOWED TO CHANGE HTML OR JAVASCRIPT

So, I thought on using their ID to overlap them. I actually got the image to be on the same place, however, behind the original image.

Any ideas?

The HTML

<div id="div-icones" style="width: 164px;">

<ul id="ulIcones" class="icones">
    <li>
        <a href="#" class="" title="Trocar para a versão simplificada" onclick="ChangeVersionHB('min');">
            <img title="Trocar para a versão simplificada" id="imgChangeVersion" src="images/ico_hb_min.png" width="16" height="16">
        </a>
    </li>
    <li>
        <a href="#" class="" title="Salvar Configuração" onclick="saveCfg();">
            <img title="Salvar Configuração" id="imgSave" src="images/ico_sv.png" width="16" height="16">
            </a>
        </li>
    <li>
        <a href="#" class="" title="Restaurar Configuração Padrão" onclick="resetCfgDefault();">
            <img title="Restaurar Configuração Padrão" id="imgConfDefault" src="images/folder_image.png" width="16" height="16">
            </a>
        </li>
    <li>
        <a href="#" class="" title="Bloquear funções de Layout" onclick="oSTBroker.fixLayout();">
            <img title="Bloquear funções de Layout" id="imgCadeado" src="images/lock_open.png" width="16" height="16">
            </a>
        </li>
    <li>
        <a href="#" class="" title="Configuração do Cliente" onclick="showCfgCli();">
        <img title="Configuração do Cliente" id="imgCliCfg" src="images/ico_cg.png" width="16" height="16">
            </a>
        </li>
    <li>
        <a href="#" class="" title="Teclas de Atalho" onclick="showHotkeys();">
        <img title="Teclas de Atalho" id="imgHotkeys" src="images/ico_hk.png" width="16" height="16">
            </a>
        </li>
    <li>
        <a href="#" class="" title="Manual" onclick="AbrePagina(ConfigHB.urlManual, 'WINmn', '', 'no', 'yes', '780', '560', false);">
        <img title="Manual" id="imgAjuda" src="images/ico_aj.png" width="16" height="16">
            </a>
        </li>
    <li>
        <a href="#" class="" title="Seleciona CSS" onclick="AbrePagina('LstEstilos.aspx', 'LstEstilos', '', 'no', 'yes', '780', '300', false);">
            <img title="Selecione o layout" id="imgSelCss" src="images/ico_ml.png" width="16" height="16">
        </a>
    </li>
</ul>

My CSS to change the image

#imgChangeVersion {

box-sizing: border-box;
background: url(images/ico_hb_minc.png);
background-size: 16px;

}

why not just hide the image and put the background image in the anchor? — epascarello
– epascarello, Commented Sep 19, 2018 at 16:38
is this some kind of coding challenge? If not, just tell your client you need to use javascript or change the html. — Jason bamber
– Jason bamber, Commented Sep 19, 2018 at 17:42
At least you have different titles on a tags, use a[title="Seleciona CSS"] and a[title="Seleciona CSS"] img as selectors. — Stickers
– Stickers, Commented Sep 19, 2018 at 17:48
I didn't go away, simply because it will be like empty in <a>, use visibility:hidden rather than display:none, or give <a> some size. — Stickers
– Stickers, Commented Sep 19, 2018 at 17:57

Stickers · Accepted Answer · 2018-09-20 12:26:54Z

2

Since you cannot have pseudo elements with <img> tag (although it might work in some browsers, but it's certainly non-standard). So you'll have to use parent selectors if they have unique classes, ids or attributes.

In your example, all the <a> have different title values. So you can do:

a[title="Trocar para a versão simplificada"] {...}
a[title="Trocar para a versão simplificada"] img {...}

a[title="Salvar Configuração"] {...}
a[title="Salvar Configuração"] img {...}

You can hide the img by applying display:none (collapse) or visibility:hidden (keep space).

Then apply background image on each a tag, you probably also want to set it to display:block or inline-block and give it some width and height.

edited Sep 20, 2018 at 12:26

answered Sep 19, 2018 at 18:05

Stickers

79.1k24 gold badges157 silver badges195 bronze badges

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

Comments

itailitai · Accepted Answer · 2018-09-19 16:57:33Z

0

Try using the "content" property, like so:

#imgChangeVersion {
box-sizing: border-box;
content:url(images/image.png); /* change image here */
background-size: 16px;
}

JSFiddle

answered Sep 19, 2018 at 16:57

itailitai

4592 gold badges4 silver badges16 bronze badges

1 Comment

Bruno De Faria Over a year ago

It didn´t work, I olmost got it with with background image and setting background size, the image goses behind the original.

Tim Willis · Accepted Answer · 2018-09-19 18:28:37Z

0

Sounds like you should use the solution that was described in some of the comments on the initial question along with css selectors like nth-of-type() or nth-child() since your <a> tags don't have classes.

img {
   display: none;
}
a:nth-of-type(){
   background-image: url('');
   width: 16px;
   height: 16px;
}

Read up on the nth-of-type selector and nth-child selector

Also consider using + selector to target <a> elements immediately within <li> elements such as:

li + a:nth-of-type(){
    background-image: url('');
    width: 16px;
    height: 16px;
}

In both of these solutions make sure to put a number inbetween the parentheses following nth-of-type, i.e. nth-of-type(3) to target the 3rd element.

edited Sep 19, 2018 at 18:28

answered Sep 19, 2018 at 17:16

Tim Willis

515 bronze badges

3 Comments

Bruno De Faria Over a year ago

I'll try, I just need to study a bit of how to use the nth, I've never used it before.

Tim Willis Over a year ago

nth-of-type will apply to all <a> tags on the page, so you might consider using something like the + selector to target <a> tags directly in <li> tags. I edited my answer to include a note about this.

Bruno De Faria Over a year ago

Thanks @Tim Willis, I'll check more about that.

Collectives™ on Stack Overflow

Replace a img using only CSS and cannot change HTML

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related