Como estilo de um formulário HTML usando classes? [fechado]
estou a tentar adicionar estilos a este formulário, mas como tenho outras áreas semelhantes numa pesquisa (submeter, por exemplo), preciso de adicionar classes para estilo deste formulário usando o CSS. Qualquer ajuda seria muito apreciada.
<perch:form id="contact" method="post" app="perch_forms">
<perch:content id="intro" type="textarea" label="Intro" textile="true" editor="markitup" size="m" />
<div>
<perch:label for="name">Name</perch:label>
<perch:input type="text" id="name" required="true" label="Name" antispam="name" />
<perch:error for="name" type="required">add your name</perch:error>
</div>
<div>
<perch:label for="email">Email</perch:label>
<perch:input type="email" id="email" required="true" label="Email" antispam="email" placeholder="" />
<perch:error for="email" type="required">add your email</perch:error>
<perch:error for="email" type="format">check your email</perch:error>
</div>
<div>
<perch:label for="message">Message</perch:label>
<perch:input type="textarea" id="message" required="true" label="Message" />
</div>
<div>
<perch:input type="submit" id="submit" value="Send" />
</div>
<perch:success>
<perch:content id="success" type="textarea" label="Thank you message" textile="true" editor="markitup" />
</perch:success>
</perch:form>
2 answers
IDs e como você pode usá-los
Se você quer estilizar apenas esta forma em si, você nem precisa adicionar aulas. Basta prefaciar cada um dos seus selectores de CSS com o ID do elemento que contém o exterior. Por exemplo...Esta primeira linha contém toda a forma...
<perch:form id="contact" method="post" app="perch_forms">
Note que a linha acima tem uma identificação específica... id="contact" este ID é único, ID's só pode ser usado uma vez por página, você também pode nomeá-los o que quiser, desde que eles não comeces com um número.
Ao pré-configurar todos os seus selectores de CSS com este ID, irá efectuar apenas os elementos dentro do elemento a que o ID Está ligado... Mencionou o uso de input[type=submit] e que mudou todos os botões do seu site. Muda esse selector para isto em vez disso:
#contact input[type=submit] { }
O selector acima irá agora afectar apenas as entradas com um tipo de envio que estão contidas dentro do contacto ID. É importante notar que o símbolo hash - # - designa " ID " em a tua folha de CSS.
Aulas e como as podes usar
Se tiver de usar classes, o que é recomendado para quaisquer estilos que possam ser reutilizados noutro local, então terá simplesmente de adicionar class="classname" ao elemento a que deseja que a classe se aplique.
<perch:input type="submit" id="submit" value="Send" />
Torna-se isto... <perch:input class="whitetext" type="submit" id="submit" value="Send" />
Note o class="whitetext"
.whitetext { color: #fff; }
Note que o carácter do período designa uma "classe" numa folha CSS.
Combinando IDs e classes
Você também pode combinar estes dois ou mesmo os três. Isto aumenta a sua especificidade. Por exemplo...
#contact input[type="submit"].whitetext { color: #fff; }
O selector acima irá mudar a cor de texto de um elemento de entrada para branco, apenas se o elemento de entrada tiver o valor do tipo de "submeter" e essa mesma entrada também tem que ter uma classe de "whitetext" E a entrada também é descendente de um elemento que tem o valor de ID de "contato".
Para estilo do botão Enviar
Código De Exemplo:
input#submit {
color: #444444;
text-shadow: 0px 1px 1px #ffffff;
border-bottom: 2px solid #b2b2b2;
background-color: #b9e4e3;
background: -webkit-gradient(linear, left top, left bottom, from(#beeae9), to(#a8cfce));
background: -moz-linear-gradient(top, #beeae9, #a8cfce);
background: -o-linear-gradient(top, #beeae9, #a8cfce);
background: -ms-linear-gradient(top, #beeae9, #a8cfce);
}
input#submit:hover {
color: #333333;
border: 1px solid #a4a4a4;
border-top: 2px solid #b2b2b2;
background-color: #a0dbc4;
background: -webkit-gradient(linear, left top, left bottom, from(#a8cfce), to(#beeae9));
background: -moz-linear-gradient(top, #a8cfce, #beeae9);
background: -o-linear-gradient(top, #a8cfce, #beeae9);
background: -ms-linear-gradient(top, #a8cfce, #beeae9);
}
Para Os Ficheiros De Entrada De Estilo
Código De Exemplo:
input {
font-size: 120%;
color: #5a5854;
background-color: #f2f2f2;
border: 1px solid #bdbdbd;
border-radius: 5px;
padding: 5px 5px 5px 30px;
background-repeat: no-repeat;
background-position: 8px 9px;
display: block;
margin-bottom: 10px;
}
input:focus {
background-color: #ffffff;
border: 1px solid #b1e1e4;
}
input#email {
background-image: url("images/email.png");
}
input#twitter {
background-image: url("images/twitter.png");
}
input#web {
background-image: url("images/web.png");
}
Você pode ler mais aqui Styling HTML forms e aqui Os formulários Web do estilo usando o CSS
Você pode até gostar do gerador de forma mais fácil para fazer formas com feilds de forma comum.