Bagaimana untuk Mengintegrasikan Butang dengan Lancar dalam Medan Input Menggunakan CSS?

Cara Mengintegrasikan Butang Dalam Medan Input Menggunakan CSS

Soalan:

Dalam antara muka pengguna, bagaimana boleh kami menggabungkan butang secara visual dalam medan input, membolehkan pengguna berinteraksi dengannya dengan lancar, mengekalkan kejelasan teks walaupun medan panjang, memastikan operasi fokus yang betul dan mengekalkan kebolehcapaian untuk pembaca skrin?

Jawapan:

Untuk mencapai kesan ini, kita boleh menggunakan susun atur kotak flex dan letakkan sempadan di sekeliling borang yang mengandungi. Dengan melaksanakan susun atur kotak flex, input dan butang boleh disusun bersebelahan, dengan input meregang untuk menduduki ruang yang tersedia. Selepas itu, sempadan input boleh dialih keluar untuk menjadikannya tidak kelihatan, mewujudkan ilusi bahawa sempadan menyertakan kedua-dua butang dan input.

Pelaksanaan:

Coretan berikut dipamerkan pelaksanaan kod:

<code class="css">form {
  display: flex;
  flex-direction: row;
  border: 1px solid grey;
  padding: 1px;
}

input {
  flex-grow: 2;
  border: none;
}

input:focus {
  outline: none;
}

form:focus-within {
  outline: 1px solid blue;
}

button {
  border: 1px solid blue;
  background: blue;
  color: white;
}</code>

<code class="html"><form>
  <input />
  <button>Go</button>
</form></code>

Faedah Pendekatan Ini:

• Integrasi Visual: Butang diletakkan secara visual dalam medan input.
• Reka Bentuk Responsif: Teks kekal kelihatan tanpa mengira panjang medan.
• Petunjuk Fokus Betul: Fokus dikekalkan dalam induk borang.
• Kebolehaksesan: Pembaca skrin boleh mentafsir struktur borang dengan tepat.
• Css-Stylable: Keseluruhan komponen boleh disesuaikan melalui CSS.
• Boleh skala: Ia boleh menyesuaikan diri dengan saiz skrin yang berbeza dan ruang yang tersedia.

Atas ialah kandungan terperinci Bagaimana untuk Mengintegrasikan Butang dengan Lancar dalam Medan Input Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!