Come modellare l'input e inviare il pulsante con CSS?

Sto imparando i CSS. Come modellare l'input e inviare il pulsante con CSS?

Sto provando a creare qualcosa del genere ma non ho idea di come fare

<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/

Ecco un punto di partenza

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

Disegna semplicemente il tuo pulsante Invia come se fosse qualsiasi altro elemento html. puoi scegliere come target diversi tipi di elementi di input utilizzando il selettore di attributi CSS

Ad esempio potresti scrivere

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

Combina con altri selettori

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

Ecco un esempio funzionante

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

Suggerirei invece di utilizzare

<input type='submit'>

uso

<button type='submit'>

Button è stato introdotto specificatamente pensando allo stile CSS. Ora puoi aggiungere l'immagine di sfondo sfumato o modellarla usando i gradienti CSS3.

Maggiori informazioni sulla struttura dei moduli HTML5 qui

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

Saluti! .Pav

Per affidabilità suggerirei di dare nomi di classe, o di ids agli elementi per lo stile (idealmente a classper gli input di testo, dato che presumibilmente ce ne saranno diversi) e un idal pulsante di invio (anche se a classfunzionerebbe anche):

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

Con il CSS:

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

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

Per i browser più aggiornati, puoi selezionare per attributi (usando lo stesso HTML):

.input {
    /* styles all input elements */
}

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

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

Potresti anche usare solo combinatori di pari livello (poiché gli input di testo per lo stile sembrano seguire sempre un labelelemento e l'invio segue un'area di testo (ma questo è piuttosto 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'interfaccia utente dell'elemento forma è in qualche modo controllata dal browser e dal sistema operativo, quindi non è banale modellarli in modo molto affidabile in modo tale che sembrerebbe lo stesso in tutte le comuni combinazioni browser / sistema operativo.

Invece, se vuoi qualcosa di specifico, consiglierei di usare una libreria che ti fornisce elementi di modulo stylable. uniform.js è una di queste librerie.

Per lo styling di un tipo di input, utilizzare il seguente codice.

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

In realtà, anche questo funziona alla grande.

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

L'ho fatto in questo modo in base alle risposte fornite qui, spero che sia di aiuto

.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>

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

Molto semplice:

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

Funziona, l'ho testato.