como dar un color de fondo a varios elementos de un formulario?

[rufus]

Hola

Tengo un formulario y quiero darle un color de fondo por cada elemento: un checkbox, un campo select o un campo de texto.

Código HTML:

<fieldset>
 
        <ul id="form1">
 
          <label class="gris">
 
            <li>
 
                <label>Edad:</label>
 
                <input name="edad" type="text" tabindex="80" />
 
            </li>
 
          </label>
          
            <li> 
 
                <label>Sexo:</label>
                <input type="radio" name="hombre" value="1">hombre
                <input type="radio" name="mujer" value="2">mujer 
 
            </li>
 
            <li>
 
                <label>Estas estudiando:</label>
 
                <select name="estudios"  tabindex="60">
                    <option value="primaria" >Primaria</option>
                    <option value="secundaria">Secundaria</option>
                    <option value="bachillerato">Bachillerato</option>
                    <option value="modulogradomedio">Módulo grado medio</option>
                    <option value="modulogradosuperior">Módulo grado superior</option>
                    <option value="Diplomatura">Diplomatura</option>
                    <option value="licenciatura">Licenciatura</option>
                    <option value="doctorado">Doctorado</option>
 
                </select>
 
            </li>
<ul>
 
        </ul>
 
      </fieldset>
 

no se si lo he maquetado bien para lo que quiero hacer!!!

quiero dar color al nombre de cada campo y al rededor del rectangulo donde se introduce la informacion o del rectangulo donde esta el desplegable. pero quedando espacios en blanco entre elementos!!!!

esto trozo del formulario , este <ul><li> va en horizontal

esto es lo unico que tengo de css por el momento:

Código CSS:

ul#form1 li { float:left; list-style-type: none; padding-left: 8px; }
 
label.gris {background-color:#efefef;}
 

me he explicado bien???? he probado varias cosas por ejemplo:

a cada <li> le he puesto un class con el color gris de fondo pero no me hace lo que yo quiero.

Le he puesto al <ul> la etiqueta de color de fondo, pero me pone el color de fondo en toda la linea horizontal y yo quiero que sea solo elemento por elemento quedando espacios en blanco!!!

entonces debo de usar otro elemento? no se por ejemplo <p> pero creo que para maquetarlo mejor uso <ul> et... ,no?

saludos

[rufus]

he rodeado con un <label> </label> al primer elemento <li> para intentar darle estilo poniendo el color en un class en label pero nada de nada...

[pzin]

¿Qué sentido le ves el poner un formulario en una lista? Nunca he visto hacer algo así.

[rufus]

parece que tienes razon..ya he visto algo de informacion al respecto. pero si no uso listas, como maqueto las diferentes partes de un formulario? con parrafos? usando tablas? como?

[pzin]

Puedes hacerlo con DIV perfectamente, le das un color de fondo y luego un margen para que exista esa separación que buscas.