samedi 27 juin 2015

How can I display form with select options as horizontaly lists?

It is posible by css to display a form with select as vertical lists following code ?

<form action="">
<select class="selectWidth" name="size" id="size" type="text">
<optgroup label="Standard">
    <option value="800x600" >800x600</option>
    <option value="1024x768" >1024x768</option>
    <option value="1280x960" >1280x960</option>
    <option value="1280x1024" >1280x1024</option>
    <option value="1400x1050" >1400x1050</option>
    <option value="1600x1200" >1600x1200</option>
    <option value="2560x2048" >2560x2048</option>
</optgroup>

<optgroup label="Widescreen">
    <option value="1024x600" >1024x600</option>
    <option value="1280x800" >1280x800</option>
    <option value="1366x768" >1366x768</option>
    <option value="1440x900" >1440x900</option>
    <option value="1600x900" >1600x900</option>
    <option value="1680x1050" >1680x1050</option>
    <option value="1920x1080" >1920x1080</option>
    <option value="1920x1200" >1920x1200</option>
    <option value="2560x1440" >2560x1440</option>
    <option value="2560x1600" >2560x1600</option>
 </optgroup>

 <optgroup label="Mobile">
     <option value="240x320" >240x320 (ipod)</option>
     <option value="320x480" >320x480 (iphone)</option>
     <option value="640x960" >640x960 (iphone4)</option>
     <option value="640x1136" >640x1136 (iphone5)</option>
     <option value="1024x1024" >1024x1024 (ipad)</option>
</optgroup>
</select>
</form>

I would like to be displayed like this:

Standard: 800x600 1024x768 1280x960 .....

Widescreen: 1024x600 1280x800 .... 2560x1600

Mobile : 240x320 320x480 640x960 ..... 1024x1024

Aucun commentaire:

Enregistrer un commentaire