Menghilangkan Inner Outer

tech

Table of Content

• Introduction
• Chrome
• Firefox

Introduction

Gambar diatas tidak jadi masalah di awal. coba kita perhatikan gambar dibawah.

Untuk menghilangkan tanda panah atas bawah itu dengan menggunakan kode css berikut:

Chrome

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

Firefox

input[type=number] {
	-moz-appearance: textfield;
}

Penjelasan:

1. Selector input[type=number]:
   • Ini adalah selector yang menargetkan elemen <input> dengan atribut type yang memiliki nilai number. Artinya, aturan CSS ini hanya akan diterapkan pada input yang mengizinkan pengguna untuk memasukkan angka.
2. Pseudoelement ::-webkit-inner-spin-button:
   • Ini adalah pseudoelement yang digunakan untuk menargetkan tombol spinner bagian dalam dari elemen input tipe number di browser berbasis WebKit seperti Google Chrome dan Safari. Tombol ini biasanya muncul sebagai panah ke atas dan ke bawah di samping input, yang memungkinkan pengguna untuk meningkatkan atau menurunkan nilai input dengan mudah.
3. Pseudoelement ::-webkit-outer-spin-button:
   • Ini adalah pseudoelement yang menargetkan tombol spinner bagian luar dari elemen input tipe number. Dalam banyak kasus, ini juga merujuk pada tombol yang sama tetapi dalam konteks yang sedikit berbeda.
4. webkit-appearance: none;:
   • Properti CSS ini mengubah tampilan elemen ke default, yang berarti menghapus gaya bawaan dari browser. Dalam konteks ini, ini digunakan untuk menghilangkan tombol spinner (panah) pada input tipe number.
5. margin: 0;:
   • Ini mengatur margin elemen menjadi 0. Ini berguna untuk memastikan bahwa tidak ada ruang ekstra yang ditambahkan di sekitar tombol spinner yang dihilangkan, sehingga tampilan input menjadi lebih bersih dan sesuai dengan desain yang diinginkan.

Date: 11-11-2024