Membuat Input Terlihat menyatu dengan Tombol

Penggunaan form pada website menjadi hal yang wajib, tentunya digunakan untuk keperluan tertentu. Dengan begitu penggunaan manipulasi objek terhadap kolom search sudah seharusnya kita kuasai. Melihat berkembangnya desain website saat ini manipulasi objek HTML menjadi hal yang sangat umum. Karena dari sana lah kita bisa menilai daya tarik website tersebut, sehingga bisa dikatakan bahwa desain website juga memiliki pengaruh pada lamanya pengunjung berada pada suatu website. Oleh karena itu pada kesempatan kali ini saya akan memberikan sebuah trik tentang HTML CSS, trik ini membahas mengenai cara untuk membuat kolom search agar terlihat menyatu dengan tombol search nya.

Sebenarnya kali ini kita hanya memanipulasi objek dengan warna yang memang sengaja akan kita buat sama, sehingga kolom search terlihat menyatu dengan tombolnya.

 

Baiklah teman-teman pertama kita buat dulu form search seperti biasa dengan html berikut

<form action="" method="post" class="search">
    <input type="text" name="kata_kunci">
    <input type="submit" name="kirim">
</form>

 

Dengan begitu akan menjadi seperti ini

 

Selanjutnya kita akan memberikan style dengan css dengan memberikan background pada tag form yang memiliki class .search

Tujuan diberikannya background ini untuk menjadikan tag form sebagai warna dasar dari input yang ada di dalamnya. Berikut adalah kode CSSnya:

.search{
        background: darkgrey;
        border: 1px solid grey;
        display: inline-block;
    }

 

Selanjutnya kita akan menghilangkan background dan border pada tag input didalamnya yang memang telah dimiliki sebagai style default tag input. CSSnya seperti berikut

.search input{
        background-color: transparent;
        border: none;
        padding: 5px 3px;
        color:#fff;
    }

 

Saat dilihat pada browser akan menjadi seperti ini

Langkah terakhir kita hanya perlu memberikan efek cursor pointer pada tombol dengan css berikut

.search input[type=submit]{
        cursor: pointer;
    }

 

Baiklah semuanya, dengan kemampuan untuk memanipulasi objek html seperti diatas akan sangat berguna ketika kita menemukan kasus desain unik lainnya. Kita sudah membahas tentang bagaimana cara membuat kolom seatch agar terlihat menyatu dengan tombol. Saya kira ini cukup mudah untuk dimengerti. Semoga bermanfaat

 

21 Mei 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat