Comment styliser l'entrée et soumettre le bouton avec CSS?

J'apprends le CSS. Comment styliser l'entrée et soumettre le bouton avec CSS?

J'essaye de créer quelque chose comme ça mais je ne sais pas 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>

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

Personnalisez simplement votre bouton Soumettre comme vous le feriez pour tout autre élément html. vous pouvez cibler différents types d'éléments d'entrée à l'aide du sélecteur d'attributs CSS

A titre d'exemple, vous pourriez écrire

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

Combinez 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

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

Je suggérerais au lieu d'utiliser

<input type='submit'>

utilisation

<button type='submit'>

Button a été introduit spécifiquement en gardant à l'esprit le style CSS. Vous pouvez maintenant y ajouter l'image d'arrière-plan dégradé ou la styliser à 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érerais de donner des noms de classe, ou ids aux éléments à styliser (idéalement un classpour les entrées de texte, car il y en aura probablement plusieurs) et un idau bouton de soumission (bien que classcela fonctionne également):

<form action="#" method="post">
    <label for="text1">Text 1</label>
    <input type="text" class="textInput" id="text1" />
    <label for="text2">Text 2</label>
    <input type="text" class="textInput" id="text2" />
    <input id="submitBtn" type="submit" />
</form>

Avec le CSS:

.textInput {
    /* styles the text input elements with this class */
}

#submitBtn {
    /* styles the submit button */
}

Pour des navigateurs plus à jour, vous pouvez sélectionner par attributs (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 également simplement utiliser des combinateurs frères (puisque les entrées de texte dans le style semblent toujours suivre un labelélément et que la soumission 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'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 anodin de les styliser de manière très fiable de manière à ce qu'elle ait la même apparence dans toutes les combinaisons courantes de navigateur / système d'exploitation.

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 de la mise en forme 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;
             }

Je l'ai fait de cette façon sur la base des réponses données ici, j'espère que cela 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;
    }

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 Button</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<a href="#" class="btn">Push</a>
</div>
</body>
</html>

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:

<html>
<head>
<head>
<style type="text/css">
.buttonstyle 
{ 
background: black; 
background-position: 0px -401px; 
border: solid 1px #000000; 
color: #ffffff;
height: 21px;
margin-top: -1px;
padding-bottom: 2px;
}
.buttonstyle:hover {background: white;background-position: 0px -501px;color: #000000; }
</style>
</head>
<body>
<form>
<input class="buttonstyle" type="submit" name="submit" Value="Add Items"/>
</form>
</body>
</html>

Cela fonctionne, j'ai testé.