Bagaimana untuk Mengalih Keluar Sempadan yang Tidak Diingini daripada Butang Input dalam CSS?

Menghapuskan Sempadan Tidak Diingini daripada Butang Input

Apabila berinteraksi dengan tapak web, pengguna sering menemui butang input, yang berfungsi sebagai elemen interaktif untuk menyerahkan data atau memulakan tindakan. Walau bagaimanapun, butang ini kadangkala memaparkan jidar yang tidak sedap dipandang apabila diklik atau difokuskan.

Dalam CSS, sifat garis besar bertanggungjawab untuk mencipta jidar yang boleh dilihat di sekeliling butang. Secara lalai, elemen dalam dokumen web menerima garis besar bertitik apabila difokuskan. Dalam kes butang input, garis besar ini boleh menjadi sangat mengganggu.

Penyelesaian: Mengalih keluar Garis Besar

Untuk menghapuskan sempadan yang tidak diingini, anda boleh memanfaatkan kuasa menggariskan harta dengan menetapkan nilainya kepada tiada. Begini caranya:

input[type=button] {
  width: 120px;
  height: 60px;
  margin-left: 35px;
  display: block;
  background-color: gray;
  color: white;
  border: none;
  outline: none;
}

Contoh

Menggunakan gaya ini pada butang input HTML anda akan mengalih keluar garis besar apabila klik atau fokus, menjadikan anda pengguna yang bersih dan lancar pengalaman:

<input type="button" value="Example Button">

Nota untuk Chrome Pengguna

Dalam Chrome, pengalihan keluar sempadan garis besar menggunakan garis besar: tiada; harta mungkin tidak mencukupi. Dalam kes sedemikian, baris tambahan CSS diperlukan:

-webkit-appearance: none;

Gunakan kedua-duanya garis besar: tiada; dan penampilan -webkit: tiada; sifat pada CSS anda untuk memastikan sempadan tidak muncul dalam penyemak imbas Chrome.

Atas ialah kandungan terperinci Bagaimana untuk Mengalih Keluar Sempadan yang Tidak Diingini daripada Butang Input dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!