Cara menggunakan pemilih kelas pseudo :focus untuk menukar gaya elemen bentuk-tutorial css-php.cn

Cara menggunakan pemilih kelas pseudo :focus untuk menukar gaya elemen bentuk

WBOY

Lepaskan： 2023-11-20 12:41:09

asal

1652 orang telah melayarinya

Cara menggunakan pemilih kelas pseudo :focus untuk menukar gaya elemen bentuk

Cara menggunakan:fokus pemilih kelas pseudo untuk menukar gaya elemen bentuk

Pengenalan:

Dalam reka bentuk web kami, elemen borang ialah komponen interaktif biasa dan pengguna boleh berinteraksi dengan halaman web melalui elemen borang. Untuk meningkatkan pengalaman pengguna dan estetika antara muka, kami selalunya perlu menukar gaya elemen bentuk apabila pengguna berinteraksi dengan mereka. Artikel ini akan memperkenalkan cara menggunakan pemilih kelas pseudo :focus untuk menukar gaya elemen borang dan menyediakan contoh kod khusus.

1. Apakah pemilih kelas pseudo :focus?

:fokus ialah pemilih kelas pseudo dalam CSS3, yang digunakan untuk memilih elemen yang mempunyai fokus pada masa ini. Apabila pengguna mengklik atau menukar fokus melalui kekunci Tab, pemilih kelas pseudo :focus akan berkuat kuasa. Dengan pemilih kelas pseudo :focus, kita boleh menggayakan elemen bentuk secara berbeza untuk mencerminkan sama ada elemen tersebut mempunyai fokus pada masa ini.

2. Bagaimana untuk menggunakan pemilih kelas pseudo :focus?

Berikut ialah beberapa elemen bentuk biasa dan perkara yang boleh mereka gunakan: pemilih kelas pseudo fokus:

elemen input:

input:focus {
  /* 设置表单元素获取焦点时的样式 */
}

Salin selepas log masuk

elemen textarea:

textarea:focus {
  /* 设置表单元素获取焦点时的样式 */
}

Salin selepas log masuk

elemen pilihan semula: Kod

Contoh:

Seterusnya, kami memberikan beberapa contoh kod khusus untuk menunjukkan cara menggunakan pemilih kelas pseudo :focus untuk menukar gaya elemen bentuk.

select:focus {
  /* 设置表单元素获取焦点时的样式 */
}

Salin selepas log masuk

Dalam kod di atas, apabila kotak input mendapat fokus, warna jidarnya akan bertukar kepada biru.

<!DOCTYPE html>
<html>
<head>
  <style>
    input[type=text]:focus {
      border: 2px solid blue;
    }
  </style>
</head>
<body>
  <form>
    <label for="name">用户名：</label>
    <input type="text" id="name" name="name"><br><br>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password"><br><br>
    <input type="submit" value="提交">
  </form>
</body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci Cara menggunakan pemilih kelas pseudo :focus untuk menukar gaya elemen bentuk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!