Comment styliser les boutons de saisie et d'envoi avec CSS ?

Question

J'apprends le CSS. Comment styliser les boutons de saisie et d'envoi avec CSS ?

J'essaie de créer quelque chose comme ça mais je n'ai aucune idée de comment faire

<form action="#" method="post">
    Name <input type="text" placeholder="First name"/>
    <input type="text" placeholder="Last name"/>
    Email <input type="text"/>
    Message <input type="textarea"/>
    <input type="submit" value="Send"/>
</form>

Answer 1

http://jsfiddle.net/vfUvZ/

Voici un point de départ

CSS :

input[type=text] {
    padding:5px; 
    border:2px solid #ccc; 
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

input[type=text]:focus {
    border-color:#333;
}

input[type=submit] {
    padding:5px 15px; 
    background:#ccc; 
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
}

Answer 2

Il suffit de donner un style à votre bouton d'envoi comme vous le feriez pour n'importe quel autre élément html. Vous pouvez cibler différents types d'éléments de saisie à l'aide de la fonction Sélecteur d'attributs CSS

Par exemple, vous pourriez écrire

input[type=text] {
   /*your styles here.....*/
}
input[type=submit] {
   /*your styles here.....*/
}
textarea{
   /*your styles here.....*/
}

Combinaison avec d'autres sélecteurs

input[type=text]:hover {
   /*your styles here.....*/
}
input[type=submit] > p {
   /*your styles here.....*/
}
....

Voici un travail Exemple

Answer 3

HTML

<input type="submit" name="submit" value="Send" id="submit" />

CSS

#submit {
 color: #fff;
 font-size: 0;
 width: 135px;
 height: 60px;
 border: none;
 margin: 0;
 padding: 0;
 background: #0c0 url(image) 0 0 no-repeat; 
}

Answer 4

Je suggère qu'au lieu d'utiliser

<input type='submit'>

utiliser

<button type='submit'>

Le bouton a été introduit spécifiquement en tenant compte du style CSS. Vous pouvez désormais lui ajouter une image d'arrière-plan en dégradé ou le styliser à l'aide de dégradés CSS3.

Pour en savoir plus sur la structure des formulaires HTML5, cliquez ici

http://www.w3.org/TR/2011/WD-html5-20110525/forms.html

A la vôtre ! Pav

Answer 5

L'interface utilisateur des éléments de formulaire est quelque peu contrôlée par le navigateur et le système d'exploitation. Il n'est donc pas facile de leur donner un style très fiable de manière à ce qu'ils aient le même aspect dans toutes les combinaisons courantes de navigateur et de système d'exploitation.

Si vous voulez quelque chose de spécifique, je vous recommande d'utiliser une bibliothèque qui vous fournit des éléments de formulaire stylisables. uniforme.js est l'une de ces bibliothèques.