ARTLUNG LAB Share

background images in form elements

How well does it work? Rather inconsistently across browsers, unfortunately. If you would like to send a screenshot of these examples, please feel free!

Examples

select box

HTML Source

<select>
    <option class="bgclass1"> Amiga </option>
    <option id="idtest1"> Windows </option>
    <option style="background-image: url(./linux_os_small.gif);"> Linux </option>
    <option style="background: url(./linux_os_small.gif);"> Linux II</option>
    <option background="./freebsd_os_small.gif"> FreeBSD </option>
</select>

textarea

    <textarea class="bgclass8" rows="4" cols="40"></textarea>

radio button

    <input type="radio" name="radButton" class="bgclass3">

submit button

    <input type="submit" class="bgclass2">

input type="text"

    <input type="text" class="bgclass6">

changing an <img> tag on mouseover works consistently, but it's not a background on a form

<img src="amiga_os_small.gif" name="widget" alt="">

<select onchange="if(document.images) document.images['widget'].src='./'+this.options[this.selectedIndex].value+'_os_small.gif';">
    <option value="amiga">amiga</option>
    <option value="be">be</option>
    <option value="dos">dos</option>
    <option value="freebsd">freebsd</option>
    <option value="linux">linux</option>
    <option value="mac">mac</option>
    <option value="next">next</option>
    <option value="sun">sun</option>
    <option value="windows">windows</option>
</select>

Source Code

<style type="text/css">
<!--
#idtest1   { background-image: url(./windows_os_small.gif); }
.bgclass1  { background-image: url(./amiga_os_small.gif); }
.bgclass1  { background-image: url(./amiga_os_small.gif); }
.bgclass2  { background-image: url(./apple_logo_small.gif); }
.bgclass3  { background-image: url(./be_os_small.gif); }
.bgclass4  { background-image: url(./dos_small.gif); }
.bgclass5  { background-image: url(./freebsd_os_small.gif); }
.bgclass6  { background-image: url(./linux_os_small.gif); }
.bgclass7  { background-image: url(./mac_os_small.gif); }
.bgclass8  { background-image: url(./next_os_small.gif); }
.bgclass9  { background-image: url(./sun_os_small.gif); }
.bgclass10 { background-image: url(./windows_os_small.gif); }
//-->
</style>