Caminho correto para o objeto HTML no CSS

[Gabriela758]

Olá,

Eu tenho o código abaixo em HTML e preciso formatar no CSS, cada um dos 3 objetos inputs do formulário

<div id="registration">

 <form id="RegisterUserForm" action="" method="post">
 	<fieldset>
         <p>
            <label for="name">Nome completo</label>
            <input id="name" name="name" type="text" class="text" value="" />
         </p>
         
         <p>
            <label for="bairro">Bairro</label>
            <input id="bairro" name="bairro" type="bairro" class="text" value="" />
         </p>
         
         <p>
            <label for="cidade">Cidade</label>
            <input id="cidade" name="cidade" type="cidade" class="text" value="" />
         </p>
 	</fieldset>

Eu tentei formatar com o código abaixo mas não deu certo.. acho que não soube colocar o caminho correto até o objeto..

#registration p bairro{
input.text {
      -webkit-border-radius: 15px;
      -moz-border-radius: 15px;
      border-radius: 15px;
      border:solid 1px #444;
      font-size: 14px;
      width: 90%;/* largura dos campos do formulário */
      padding: 7px 8px 7px 30px;
      -moz-box-shadow: 0px 1px 0px #777;
      -webkit-box-shadow: 0px 1px 0px #777;
	  background: #ddd url('img/inputSprite.png') no-repeat 4px 5px;
	  background: url('img/inputSprite.png') no-repeat 4px 5px, -moz-linear-gradient(
           center bottom,
           rgb(225,225,225) 0%,
           rgb(215,215,215) 54%,
           rgb(173,173,173) 100%
           );
	  background:  url('img/inputSprite.png') no-repeat 4px 5px, -webkit-gradient(
          linear,
          left bottom,
          left top,
          color-stop(0, rgb(225,225,225)),
          color-stop(0.54, rgb(215,215,215)),
          color-stop(1, rgb(173,173,173))
          );
      color:#333;
      text-shadow:0px 1px 0px #FFF;
}
}

#registration p cidade{
input.text {
      -webkit-border-radius: 15px;
      -moz-border-radius: 15px;
      border-radius: 15px;
      border:solid 1px #444;
      font-size: 14px;
      width: 90%;/* largura dos campos do formulário */
      padding: 7px 8px 7px 30px;
      -moz-box-shadow: 0px 1px 0px #777;
      -webkit-box-shadow: 0px 1px 0px #777;
	  background: #ddd url('img/inputSprite.png') no-repeat 4px 5px;
	  background: url('img/inputSprite.png') no-repeat 4px 5px, -moz-linear-gradient(
           center bottom,
           rgb(225,225,225) 0%,
           rgb(215,215,215) 54%,
           rgb(173,173,173) 100%
           );
	  background:  url('img/inputSprite.png') no-repeat 4px 5px, -webkit-gradient(
          linear,
          left bottom,
          left top,
          color-stop(0, rgb(225,225,225)),
          color-stop(0.54, rgb(215,215,215)),
          color-stop(1, rgb(173,173,173))
          );
      color:#333;
      text-shadow:0px 1px 0px #FFF;
}
}

Como é a maneira correta de fazer?

[lowys]

Olá!

use apenas:

input[type=text] {

...

seu trecho de estilização aqui;

...

}