Combos with images

While we wait for XForms becomes the standard supported by browsers for the development of forms (I hope that
rel=”noopener”
target=”_blank”
title=”HTML Manual”>HTML 4.01.

In this case what we want is for our selection combos to appear with images and for us to be able to select one of them. Is this possible?

The answer to this question is difficult. We could say that it is not impossible. But the support given from browsers in this case is minimal. To give us an idea, it only works with engines Mozilla (FireFox and company).

The idea is the following. First, using style sheets CSS we will define three elements square, circle and triangle. These three elements will have a representative background image. To indicate the background image of an element we use the background-image attribute.

Let’s see how it would be defined:

.circle {
  background-image: url(circle.jpg);
  height: 50px;
  width: 50px;
  background-repeat: no-repeat;
}
.triangle{
  background-image: url(triangle.jpg);
  height: 50px;
  width: 50px;
  background-repeat: no-repeat;
}
.square{
  background-image: url(square.jpg);
  height: 50px;
  width: 50px;
  background-repeat: no-repeat;
}

It should be noted that we have used other attributes. The first is the height and width (height and width respectively). The idea is to have uniform images of 50×50 pixels.

The other attribute is background-repeat attribute, to which we have given a value of no-repeat. This means that the background image will only be displayed once. And if we use this style within an area of ​​100×50 we will see that, by default, the image appears duplicated.

Now we will only have to define the combo and assign the necessary styles to each option. As follows:

Square

Circle

Triangle

And that’s it. We already have our combo with images. Which, at FireFox, it will look like this: