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

146

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>

Geben Sie hier die Bildbeschreibung ein

html css

— user2307683
quelle

8

Sie können es so stylen, als würden Sie jedes andere Element

— stylen

1

stackoverflow.com/questions/3540380/…

— gaynorvader

6

Es ist wichtig zu beachten, dass Sie es nicht wie jedes andere Element formatieren können. <input>Tags unterstützen Dinge wie nicht ::after.

— JamEngulfer

2

Richtig. Deshalb denke ich, dass es vorzuziehen ist, zu verwenden <button type="submit"><span>Send</span></button>. Sie können dann ::afterauf dem span-tag verwenden.

— Kunambi

215

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

— Nick R.
quelle

67

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

— Es hat gestern funktioniert.
quelle

25

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

— Jayram
quelle

17

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

— Pav
quelle

1

Dies war sehr hilfreich, da Safari für iOS meinen Stil korrekt auf Schaltflächen anwendet, jedoch nicht auf <input type = "

— submit

Aber dann können Sie keinen Wert als Text auf der Schaltfläche angeben, sondern als Text zwischen den Schaltflächen-Tags <button> TEXT </ button>

— Uzebeckatrente

4

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

— David sagt, Monica wieder einsetzen
quelle

4

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.

— eis
quelle

@BalinKingOfMoria sieht ja so aus. Ich habe den Link aktualisiert.

— Eis

1

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

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

— JacobG182
quelle

1

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

— Mpairwe Humphrey
quelle

Das ist völlig schrecklich

— Ratbert

1

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

— Danilo Venegas
quelle

0

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

— karthi
quelle

2

Wie verwende ich das wie eine Submit-Eingabe?

— user2307683

0

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.

— Saikat Chakraborty
quelle