Comment styliser les boutons de saisie et de soumission avec CSS?

J’apprends le CSS. Comment styliser les boutons de saisie et de soumission avec CSS?

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

Name Email Message

entrer la description de l'image ici

http://jsfiddle.net/vfUvZ/

Voici un sharepoint 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; } 

Il suffit de mettre en forme votre bouton Soumettre comme vous le feriez avec n’importe quel autre élément HTML. vous pouvez cibler différents types d’éléments d’entrée en utilisant le sélecteur d’atsortingbuts CSS

Comme exemple, vous pourriez écrire

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

Combiner avec d’autres sélecteurs

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

Voici un exemple de travail

HTML

  

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

Je suggère au lieu d’utiliser

utilisation

Button a été introduit spécifiquement en pensant au style CSS. Vous pouvez maintenant y append l’image d’arrière-plan dégradée ou la colorer à l’aide de dégradés CSS3.

En savoir plus sur la structure des formulaires HTML5 ici

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

À votre santé! .Pav

Pour plus de fiabilité, je suggère de donner des noms de classes ou des id aux éléments à styliser (idéalement une class pour les entrées de texte, car il y en aura probablement plusieurs) et un id pour le bouton de soumission (bien qu’une class fonctionnerait comme bien):

 

Avec le CSS:

 .textInput { /* styles the text input elements with this class */ } #submitBtn { /* styles the submit button */ } 

Pour les navigateurs les plus récents, vous pouvez sélectionner par atsortingbuts (en utilisant le même HTML):

 .input { /* styles all input elements */ } .input[type="text"] { /* styles all inputs with type 'text' */ } .input[type="submit"] { /* styles all inputs with type 'submit' */ } 

Vous pouvez aussi utiliser des combinateurs fraternels (puisque les entrées de texte de style semblent toujours suivre un élément label et que submit suit une zone de texte (mais c’est plutôt fragile)):

 label + input, label + textarea { /* styles input, and textarea, elements that follow a label */ } input + input, textarea + input { /* would style the submit-button in the above HTML */ } 

L’élément de forme UI est quelque peu contrôlé par le navigateur et le système d’exploitation, il n’est donc pas sortingvial de les styliser de manière très fiable de manière à ce qu’il soit identique dans toutes les combinaisons navigateur / OS courantes.

Au lieu de cela, si vous voulez quelque chose de spécifique, je vous recommande d’utiliser une bibliothèque qui vous fournit des éléments de formulaire stylables. uniform.js est l’une de ces bibliothèques.

Lors du stylage d’un type d’entrée, utilisez le code suivant.

  input[type=submit] { background-color: pink; //Example stlying } 

En fait, cela fonctionne aussi très bien.

 input[type=submit]{ width: 15px; position: absolute; right: 20px; bottom: 20px; background: #09c; color: #fff; font-family: tahoma,geneva,algerian; height: 30px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; border: 1px solid #999; } 

HTML

     CSS3 Button       

Style CSS

 a.btn { display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto; background: #398525; /* old browsers */ background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */ box-shadow: inset 0px 0px 6px #fff; -webkit-box-shadow: inset 0px 0px 6px #fff; border: 1px solid #5ea617; border-radius: 10px; } 

Très simple:

       

Cela fonctionne, j’ai testé.

Je l’ai fait de cette façon en me basant sur les réponses données ici, j’espère que ça aide

 .likeLink { background: none !important; color: #3387c4; border: none; padding: 0 !important; font: inherit; cursor: pointer; } .likeLink:hover { background: none !important; color: #25618c; border: none; padding: 0 !important; font: inherit; cursor: pointer; text-decoration: underline; }