Πώς να διαμορφώσετε το στυλ του κουμπιού εισόδου και υποβολής με CSS;

Question

Περισσότερα

Πηγή Μη AMP-έκδοση Επεξεργασία

Πώς να διαμορφώσετε το στυλ του κουμπιού εισόδου και υποβολής με CSS;

Μαθαίνω CSS. Πώς να διαμορφώσω το στυλ του κουμπιού εισόδου και υποβολής με CSS;

Προσπαθώ να δημιουργήσω κάτι τέτοιο, αλλά δεν έχω ιδέα πώς να το κάνω.

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

Προγραμματισμός

html css

Κάνε Ιούνιος 2013 в 10:44

17 προβολές

Monkey D Luffy · Answer 1 · 2013-06-11T10:48:12+00:00

Απλά διαμορφώστε το κουμπί Submit όπως θα διαμορφώνατε οποιοδήποτε άλλο στοιχείο html.Μπορείτε να στοχεύσετε σε διαφορετικούς τύπους στοιχείων εισόδου χρησιμοποιώντας τον Επιλογέα χαρακτηριστικών CSS.

Για παράδειγμα θα μπορούσατε να γράψετε

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

Συνδυασμός με άλλους επιλογείς

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

Εδώ είναι ένα λειτουργικό [Παράδειγμα][1]

Jayram · Answer 2 · 2013-06-11T10:46:40+00:00

Jayram

Πηγή Μη AMP-έκδοση Επεξεργασία

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

23

0

Σχόλια (0)

eis · Answer 3 · 2013-06-11T10:47:32+00:00

το UI των στοιχείων φόρμας ελέγχεται κάπως από το πρόγραμμα περιήγησης και το λειτουργικό σύστημα, οπότε δεν είναι τετριμμένο να τα διαμορφώσετε πολύ αξιόπιστα με τρόπο ώστε να φαίνονται το ίδιο σε όλους τους κοινούς συνδυασμούς προγράμματος περιήγησης/OS.

Αντ' αυτού, αν θέλετε κάτι συγκεκριμένο, θα σας συνιστούσα να χρησιμοποιήσετε μια βιβλιοθήκη που σας παρέχει στυλιζαριστά στοιχεία φόρμας. Η uniform.js είναι μια τέτοια βιβλιοθήκη.