Wie gestalte ich die Eingabe- und Übermittlungsschaltfläche mit CSS?

Ich lerne CSS. Wie gestalte ich die Eingabe- und Übermittlungsschaltfläche mit CSS?

Ich versuche so etwas zu erstellen, aber ich habe keine Ahnung, wie ich es machen soll

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

Hier ist ein Ausgangspunkt

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

Gestalten Sie einfach die Schaltfläche "Senden" wie jedes andere HTML-Element. Mit der CSS-Attributauswahl können Sie auf verschiedene Arten von Eingabeelementen abzielen

Als Beispiel könnte man schreiben

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

Mit anderen Selektoren kombinieren

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

Hier ist ein funktionierendes Beispiel

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

Ich würde vorschlagen, anstatt zu verwenden

<input type='submit'>

verwenden

<button type='submit'>

Button wurde speziell unter Berücksichtigung des CSS-Stils eingeführt. Sie können jetzt das Hintergrundbild mit Farbverlauf hinzufügen oder mithilfe von CSS3-Farbverläufen formatieren.

Weitere Informationen zur Struktur von HTML5-Formularen finden Sie hier

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

Prost! .Pav

Aus Gründen der Zuverlässigkeit würde ich vorschlagen, idden zu klassifizierenden Elementen Klassennamen oder s zu geben (idealerweise a classfür die Texteingaben, da es vermutlich mehrere geben wird) und idder Schaltfläche zum Senden (obwohl a classauch funktionieren würde):

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

Mit dem CSS:

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

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

Für aktuellere Browser können Sie nach Attributen auswählen (mit demselben HTML-Code):

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

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

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

Sie können auch einfach Geschwisterkombinatoren verwenden (da die Texteingaben für den Stil immer einem labelElement zu folgen scheinen und die Übermittlung einem Textbereich folgt (dies ist jedoch ziemlich fragil)):

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

Die Benutzeroberfläche des Formularelements wird in gewisser Weise vom Browser und vom Betriebssystem gesteuert. Daher ist es nicht trivial, sie so zuverlässig zu gestalten, dass sie in allen gängigen Browser- / Betriebssystemkombinationen gleich aussehen.

Wenn Sie etwas Bestimmtes wünschen, würde ich stattdessen empfehlen, eine Bibliothek zu verwenden, die Ihnen stilbare Formularelemente bietet. uniform.js ist eine solche Bibliothek.

Verwenden Sie beim Stylen eines Eingabetyps "Senden" den folgenden Code.

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

Eigentlich funktioniert auch das super.

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

Ich habe es auf diese Weise gemacht, basierend auf den hier gegebenen Antworten. Ich hoffe, es hilft

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

CSS-Styling

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

Sehr einfach:

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

Das funktioniert ich habe getestet.