Search code examples
cssbackgroundbackground-image

How to set multiple combinations of backgrounds for option element using css

I have a select with multiple options that I want to set many combinations of background images as flags for the elements in the select list, something like this

The CSS

option{width:300px;}
option.online{background: url(media/flags/online.png) no-repeat right 0px center;}
option.full{background: url(media/flags/full.png) no-repeat right 20px center;}
option.online.full{background: url(media/flags/online.png) no-repeat right 00px center, url(media/flags/full.png) no-repeat right 20px center;}

The HTML

<select multiple>
    <option class="online full">p1-soldiers(R)</option>
    <option>p2-Blackberry(R)</option>
    <option>p3-RICK(R)</option>
    <option>p4-Aj Lifestyle(R)</option>
    <option>p5-abosaleh(R)</option>
<select>

enter image description here

I have many flags that I want to set for the options , every flag is a 20px*20px png image

At the first 20px from right I want to set the online flag it can be

  • online
  • offline
  • online for too long
  • offline for too long

At the second 20px from right I want to set the warehouse flag it can be

  • full
  • empty
  • normal

At the third 20px from right I want to set another flag with 4 possibilities

At the fourth 20px from right I want to set another flag with 3 possibilities

The problem with current approach I used from this question is that I will write a rule for every possible combination of flags which will be (4 + 3 + 4 + 3 + (4*3*4*3)) for example

option.online{}
option.offline{}
option.onlineTooLong{}
option.offlineTooLong{}
option.full{}
option.online.full{}
option.offline.full{}
/* ...... etc */

I may also add a 5th flag in the future with 6 possibilities :(

Is there any CSS way to add only one rule for each flag, not for each combination ?

Solution

  • CSS variables can help you.

    Here is a basic example where I will use gradient that you can replace with your flags

    .flags {
   background: 
      var(--f1,linear-gradient(transparent 0 0)) right 0px top 0px,
      var(--f2,linear-gradient(transparent 0 0)) right 20px top 0px,
      var(--f3,linear-gradient(transparent 0 0)) right 40px top 0px;
      /*var(--f4,linear-gradient(transparent 0 0)) right 60px top 0px */
   background-size:20px 20px;
   background-repeat:no-repeat;
}
/* for the first flag*/
.f1-1{--f1:radial-gradient(circle 10px,red 98%,transparent);}
.f1-2{--f1:radial-gradient(circle 10px,blue 98%,transparent);}
.f1-3{--f1:radial-gradient(circle 10px,green 98%,transparent);}
.f1-4{--f1:radial-gradient(circle 10px,yellow 98%,transparent);}
/* for the second flag*/
.f2-1{--f2:linear-gradient(red 0 0);}
.f2-2{--f2:linear-gradient(blue 0 0);}
.f2-3{--f2:linear-gradient(green 0 0);}
/* for the third flag*/
.f3-1{--f3:linear-gradient(pink 0 0);}
.f3-2{--f3:linear-gradient(purple 0 0);}
.f3-3{--f3:linear-gradient(black 0 0);}



[class] {
  width:100px;
  height:100px;
  display:inline-block;
  border:1px solid;
}
    <div class="flags"></div>
<div class="flags f1-1"></div>
<div class="flags f2-1 f3-2"></div>
<div class="flags f1-3 f2-2"></div>
<div class="flags f2-1 f3-3 f1-1"></div>
<div class="flags f2-3 f1-4"></div>
<div class="flags f2-1"></div>
<div class="flags f3-3"></div>

    Each flag will have one variable and all you need to do is to define a class for each case by changing that variable then you simply apply the classes you need to get the combination you want.