Φόρμα CSS

Με τη χρήση του CSS, μπορείς να βελτιώσεις σημαντικά την εμφάνιση των HTML φόρμας:

Δοκιμάστε το προσωπικά

να ρυθμίσεις το στυλ του πεδίου εισαγωγής

χρήση width παράμετρο για να καθορίσεις το πλάτος του πεδίου εισαγωγής:

παράδειγμα

input {
  width: 100%;
}

Δοκιμάστε το προσωπικά

Το παραπάνω παράδειγμα ισχύει για όλα τα στοιχεία <input>. Αν θέλεις να ρυθμίσεις το στυλ μόνο για συγκεκριμένες τύπους εισαγωγής, μπορείς να χρησιμοποιήσεις τον επιλογέα ιδιοτήτων:

  • input[type=text] - θα επιλέξει μόνο τα πεδία κειμένου
  • input[type=password] - θα επιλέξει μόνο τα πεδία κωδικού
  • input[type=number] - θα επιλέξει μόνο τα πεδία αριθμών
  • και άλλα...

πληρώματα πεδίου εισαγωγής

χρήση padding παράμετρο για να προσθέσεις χώρο στο πεδίο εισαγωγής.

Σημείωση:Αν υπάρχουν πολλά πεδία εισαγωγής, μπορείς επίσης να προσθέσεις περιθώρια για να προσθέσεις περισσότερο χώρο γύρω τους:

παράδειγμα

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Δοκιμάστε το προσωπικά

Λάβετε υπόψη ότι έχουμε ορίσει box-sizing παράμετρος να οριστεί border-boxπρέπει να περιλαμβάνει το συνολικό πλάτος και ύψος του στοιχείου, συμπεριλαμβανομένων των εσωτερικών διαφόρων (πληρώματα) και των τελικών ορίων.

Παρακαλώ στο CSS Box Sizing Σε αυτή την ενότητα μάθαμε για box-sizing πιο πολλές πληροφορίες για τις παραμέτρους.

πεδία εισαγωγής με όριο

χρησιμοποίησε border παράμετρο για να αλλάξεις το πάχος και το χρώμα του ορίου, και χρησιμοποιώντας border-radius παράμετρο για να προσθέσεις γωνιακή γωνία:

παράδειγμα

input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}

Δοκιμάστε το προσωπικά

Αν χρειάζεσαι μόνο την κάτω οριοζώνη, χρησιμοποίησε border-bottom παράμετρο:

παράδειγμα

input[type=text] {
  χωρισμός: none;
  border-bottom: 2px solid red;
}

Δοκιμάστε το προσωπικά

χρωματισμένο πεδίο εισαγωγής

χρησιμοποίησε background-color παράμετρο για να προσθέσεις χρωματισμό στο πεδίο εισαγωγής, και χρησιμοποιώντας color παράμετρο για να αλλάξει τον χρωματισμό του κειμένου:

παράδειγμα

input[type=text] {
  background-color: #3CBC8D;
  color: white;
}

Δοκιμάστε το προσωπικά

το πεδίο εισαγωγής που αποκτά έμφαση

By default, certain browsers add a blue outline around the input box when it gains focus (click). You can remove this behavior by adding outline: none; για να εξαλείψει αυτό το comportment.

χρήση :focus Ο επιλογέας μπορεί να οριστεί στυλ όταν το πεδίο εισαγωγής αποκτά έμφαση:

实例 1

input[type=text]:focus {
  Παράδειγμα 1
}

border: 3px solid #555;

Δοκιμάστε το προσωπικά

background-color: lightblue;

input[type=text]:focus {
  Παράδειγμα 2
}

border: 3px solid #555;

Δοκιμάστε το προσωπικά

Κάντε κλικ στο κουτί κειμένου:

input box with icon/image αν θέλετε να περιλαμβάνετε εικονίδια/εικόνες στο κουτί εισαγωγής, χρησιμοποιήστε ιδιότητας ιδιότητας, και την συνδυάζουμε με ιδιότητας μαζί με την

παράδειγμα

input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding-left: 40px;
}

Δοκιμάστε το προσωπικά

search input box with animation

Σε αυτό το παράδειγμα, χρησιμοποιούμε το CSS transition ιδιότητας για να ρυθμίσετε την αλλαγή πλάτους της περιοχής αναζήτησης όταν αυτή αποκτά έμφαση. Στα μελλοντικά μας CSS Μεταβατικές μπορείτε να μάθετε περισσότερα στο κεφάλαιο transition γνώσεις της ιδιότητας.

παράδειγμα

input[type=text] {
  transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
  width: 100%;
}

Δοκιμάστε το προσωπικά

Ρύθμιση στυλ περιοχής κειμένου

Σημείωση:χρήση resize Η ιδιότητα αυτή αποτρέπει την προσαρμογή του textareas (απενεργοποιεί τον "παγίδα" στα δεξιά κάτω γωνία):

παράδειγμα

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

Δοκιμάστε το προσωπικά

Ρύθμιση στυλ μενού επιλογής

παράδειγμα

select {
  width: 100%;
  padding: 16px 20px;
  χωρισμός: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

Δοκιμάστε το προσωπικά

Ρύθμιση στυλ πλήκτρων εισαγωγής

παράδειγμα

input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  χωρισμός: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
/* Προειδοποίηση: Χρησιμοποιήστε width: 100% για να επιτύχετε κουμπιά πλήρους πλάτους */

Δοκιμάστε το προσωπικά

Για περισσότερες πληροφορίες σχετικά με τη ρύθμιση του στυλ του κουμπιού με CSS, μάθετε το CSS Κουμπιά Εκμάθηση.

Απάνταξιακό Μενού

Παρακαλώ ρυθμίστε το μέγεθος του παραθύρου του TIY Επεξεργαστή για να δείτε τα αποτελέσματα. Όταν το πλάτος του οθόνης είναι μικρότερο από 600 εικονοστοιχεία, τα δύο κολόνες θα είναι επάνω-κάτω αντί για αριστερά-δεξιά.

Προχωρημένο: Οι επόμενες παραδείξεις χρησιμοποιούν Επικοινωνίες Μέσων Για να δημιουργήσετε ένα απάνταξιακό έντυπο. Στο επόμενο κεφάλαιο θα μάθετε περισσότερα.

Δείτε το Απάνταξιακό Μενού