Saya pernah telibat dalam sebuah project yang memerlukan membuat input form dengan sudut tumpul, setelah mancari di Google saya tidak menemukan jawaban yang diinginkan (karena kebanyakan menawarkan menggunakan Javascript dan Mozilla CSS), akhirnya saya mencoba membuat input form dengan teknik yang sederhana.
Ide dari input form ini sebenarnya sangat sederhana, yaitu dengan membuat image yang dibuat sebagai background dari input, lalu input ini kita samarkan. Jadi pada hasil akhir, yang kita lihat hanyalah image background saja.
Pertama, saya masukan tag input kedalam sebuah div:
<div class="rounded">
<input type="text" name="address" />
</div>Lalu buat image seperti dibawah:
Dan kemudian kode CSS nya:
input {
border: none;
background: #FFF;
width: 165px;
}
.rounded {
background: url(rounded.gif) no-repeat left top;
padding: 8px;
}
Anda dapat melihat hasil dari Implementasinya disini. (Pupung Budi Purnama)
7 Responses to Rounded Corner Input
ncus July 27, 2007
Safari 2 gak bisa di set border input atau textarea. Jadi untuk mengatasi itu harus menggunakan style sheet yang berbeda untuk safari. Atau input textnya jadi terlihat aneh.
Pupung Budi Purnama July 27, 2007
Iya, safari terlihat border kalau kita ngisi form ya? sepertinya harus ditambah :focus ya?
bobby n. ariffin August 5, 2007
kalau bentuk formnya flexibel buatnya gimana ya?
Nav Online August 13, 2007
informasi yang menarik, Trims.
deon August 21, 2007
di buat aja global setting css buat focusnya, supaya gak muncul di safari
:focus {
outline: 0px;
}
klenix September 4, 2007
cool, boleh juga buat nyesuain design yang ada. thanx bro
dolfis October 21, 2007
salam kenal bro….