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

Question

Détails

Source Version non AMP Editer

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

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

J&#8217essaie de créer quelque chose comme ça, mais je n&#8217ai aucune idée de la façon de le 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>

![entrez la description de l'image ici][1]

[1] : http://i.stack.imgur.com/jDGzD.png

Programmation

html css

11 juin 2013 в 10:44

24 vues

Monkey D Luffy · Answer 1 · 2013-06-11T10:48:12+00:00

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 du sélecteur d'attributs CSS.

Par exemple, vous pouvez é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 [Exemple][1] fonctionnel.

[1] : http://jsfiddle.net/5rjc7/

Jayram · Answer 2 · 2013-06-11T10:46:40+00:00

Jayram

Source Version non AMP Editer

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; 
}

23

0

Commentaires (0)

eis · Answer 3 · 2013-06-11T10:47:32+00:00

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. uniform.js est une de ces bibliothèques.