Question

I want to have a normal html select but instead of text have css/images. Now I know this can’t be done in any browser except Firefox but I’d like to know if there is a way around this without using JavaScript. My website has to display on feature phones (i.e. not smartphones) and the JavaScript doesn’t work on those them. Is there any way around this?

Answer 1

After many hours working at this I found a reasonable solution. If you want “images” to appear in your html select simply use font-face. So download a font online that has a star in its alphabet. Then use the following in the css. Make sure your url path is correct:

font-family: 'WebSymbolsRegular';
        src: url('../css/websymbols-regular-webfont.eot');
        src: url('../css/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
             url('../css/websymbols-regular-webfont.woff') format('woff'),
             url('../css/websymbols-regular-webfont.ttf') format('truetype'),
             url('../css/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
        }

    #Condition
    {
        font-family: 'WebSymbolsRegular';
    }

Then in your html select have the following:

<select id = "Condition">
      <option >R</option>
      <option >RR</option>
      <option >RRR</option>
      <option >RRRR</option>
      <option >RRRRR</option>
</select>

We use R because R is the letter that represents a star in this given font. Also have a look at the following link. it really helped