Mengubah tampilan form dengan CSS

Publish: 08 Mar 2018 09:10

Pada versi 3.2.2 saya telah mengubah struktur HTML form registrasi menggunakan class-class CSS. Hal ini akan lebih memudahkan anda dalam melakukan perombakan tampilan form, terutama form profil.

Biasanya, theme yg bagus akan menyediakan form khusus untuk memasukkan custom CSS. Namun, jika tidak ada, anda bisa memasukkan kode CSS langsung ke file style.css theme tersebut. Kalau mau lebih aman ya anda buat child theme dulu sebelum mengubah style.css-nya.

Ok, saya akan berikan contoh kode CSS yang bisa dipakai sebagai acuan. Nanti nilai-nilainya dapat anda ubah2 sendiri sesuai dengan theme yang anda miliki

.form-info {
	text-align:left;
	font-weight:700;
	padding:10px
}
.form-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom:13px;
	width:100%;
	vertical-align:middle;
}
.form-label {
	display:block;
	float:left;
	width:30%;
	text-align:right;
	padding-right:5px;
	font-weight:700;
}
.form-field {
	margin-top:-8px;
	width:70%;
	text-align:left;
}
.form-input {
	width:100%;
	height:40px;
	border: 1px solid #cccccc;
}
.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
	padding:10px;
	margin:10px;
}
.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
	padding:10px;
	margin:10px;
}

Selamat mencoba

Tutorial Lainnya

Jika ada pertanyaan atau komentar soal artikel di atas, silahkan disampaikan di Grup Cafebisnis. Sertakan juga URL Artikel ini: https://cafebisnis.com/tutorial/439-mengubah-tampilan-form-dengan-css

Buka | Tutup

Tutorial Bisnis Online

Mengubah tampilan form dengan CSS

Tutorial Lainnya

Tutorial Terbaru

About Us

Sponsor Anda

Lutvi Avandi