Ver Mensaje Individual
  #1 (permalink)  
Antiguo 17/11/2012, 06:11
rufus
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 15 años
Puntos: 1
como dar un color de fondo a varios elementos de un formulario?

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:
Ver original
  1.  
  2.         <ul id="form1">
  3.  
  4.           <label class="gris">
  5.  
  6.             <li>
  7.  
  8.                 <label>Edad:</label>
  9.  
  10.                 <input name="edad" type="text" tabindex="80" />
  11.  
  12.             </li>
  13.  
  14.           </label>
  15.          
  16.             <li>
  17.  
  18.                 <label>Sexo:</label>
  19.                 <input type="radio" name="hombre" value="1">hombre
  20.                 <input type="radio" name="mujer" value="2">mujer
  21.  
  22.             </li>
  23.  
  24.             <li>
  25.  
  26.                 <label>Estas estudiando:</label>
  27.  
  28.                 <select name="estudios"  tabindex="60">
  29.                     <option value="primaria" >Primaria</option>
  30.                     <option value="secundaria">Secundaria</option>
  31.                     <option value="bachillerato">Bachillerato</option>
  32.                     <option value="modulogradomedio">Módulo grado medio</option>
  33.                     <option value="modulogradosuperior">Módulo grado superior</option>
  34.                     <option value="Diplomatura">Diplomatura</option>
  35.                     <option value="licenciatura">Licenciatura</option>
  36.                     <option value="doctorado">Doctorado</option>
  37.  
  38.                 </select>
  39.  
  40.             </li>
  41. <ul>
  42.  
  43.         </ul>
  44.  
  45.       </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:
Ver original
  1. ul#form1 li { float:left; list-style-type: none; padding-left: 8px; }
  2.  
  3. 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