webentwicklung-frage-antwort-db.com.de

Wie stelle ich die Eingabe ein und sende den Button mit CSS?

Ich lerne CSS. Wie stelle ich die Eingabe ein und sende den Button mit CSS?

Ich versuche, so etwas zu erstellen, aber ich habe keine Ahnung, wie ich das 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>

enter image description here

124
user2307683

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; 
}
193
Nick R

Gestalten Sie einfach Ihre Senden-Schaltfläche so, als würden Sie jedes andere HTML-Element gestalten. Sie können verschiedene Arten von Eingabeelementen mit dem CSS-Attributselektor anvisieren.

Als Beispiel könnte man schreiben 

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

Kombinieren mit anderen Selektoren

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

Hier ist ein Arbeits Beispiel

60
Monkey D Luffy

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; 
}
22
Jayram Singh

Ich würde vorschlagen, anstatt zu verwenden

<input type='submit'>

benutzen 

<button type='submit'>

Button wurde speziell für das CSS-Styling eingeführt. Sie können jetzt das Hintergrundbild mit Farbverlauf hinzufügen oder es mit CSS3-Farbverläufen gestalten. 

Weitere Informationen zur HTML5-Formularstruktur finden Sie hier

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

Prost! . Pav

12
Pav

die Benutzeroberfläche des Formularelements wird in gewisser Weise von Browser und Betriebssystem gesteuert. Daher ist es nicht einfach, sie sehr zuverlässig so zu gestalten, dass sie in allen gängigen Browser/Betriebssystem-Kombinationen gleich aussehen.

Wenn Sie jedoch etwas Bestimmtes wünschen, würde ich empfehlen, eine Bibliothek zu verwenden, die Ihnen formbare Formularelemente zur Verfügung stellt. uniform.js ist eine solche Bibliothek.

4
eis

Aus Gründen der Zuverlässigkeit würde ich vorschlagen, den Elementen einen Klassennamen oder ids zu geben (idealerweise eine class für die Texteingaben, da vermutlich mehrere vorhanden sind) und eine id für den Submit-Button (obwohl eine class auch 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 */
}

Bei aktuelleren Browsern können Sie nach Attributen (mit demselben HTML-Code) auswählen:

.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 gleich Geschwister-Kombinatoren verwenden (da die Texteingaben für den Stil anscheinend immer einem label-Element folgen und das Submit 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 */
}
4
David Thomas

Wenn Sie einen Eingabetyp gestalten, verwenden Sie den folgenden Code.

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

Eigentlich funktioniert das auch 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;
             }
1

Ich habe es anhand der hier gegebenen Antworten so gemacht, 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;
    }
1
Danilo Venegas

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

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, habe ich getestet.

0