Bagaimana untuk membuat bar carian Google (seperti kotak input) diserlahkan pada hover menggunakan CSS?-tutorial css-php.cn

Bagaimana untuk membuat bar carian Google (seperti kotak input) diserlahkan pada hover menggunakan CSS?

WBOY

Lepaskan： 2023-09-14 23:17:02

ke hadapan

1005 orang telah melayarinya

如何使用 CSS 使 Google 搜索栏（如输入框）在悬停时突出显示？

Bar carian ialah komponen yang sering diabaikan dalam proses reka bentuk tapak web, walaupun pengguna bergantung padanya untuk mengakses maklumat unik. Memandangkan bar carian ialah salah satu bahagian tapak web yang paling biasa digunakan, reka bentuk bar carian mempunyai kesan yang besar pada pengalaman pengguna.

Bar carian berguna untuk tapak web dengan lebih daripada 100 halaman kandungan kompleks. Bar carian digunakan untuk membantu pelanggan mencari maklumat tentang tapak e-dagang yang besar, tapak berita, tapak tawaran dan tapak tempahan dalam ruang perniagaan kepada pengguna (B2C). Mereka juga digunakan oleh tapak B2B yang besar dengan pelbagai segmen pelanggan dan barisan produk. Untuk tapak web kecil dengan sedikit halaman, bar carian mungkin tidak diperlukan, tetapi apabila tapak web berkembang, bar carian akan menjadi penting.

Bar carian pada asasnya terdiri daripada dua elemen UI: medan input dan butang. Dalam artikel ini, kita akan melihat cara membuat sorotan kotak input serupa dengan bar carian Google menggunakan sifat CSS.

Bar Carian Google

Bar carian ialah lokasi dalam mana-mana pelayar internet yang membolehkan pengguna mencari maklumat yang diperlukan melalui internet. Ia juga membolehkan pembaca mencari tapak web semasa melayarinya. Begitu juga, pengguna boleh melakukan apa-apa jenis carian dari skrin utama menggunakan bar carian Google (widget carian yang dipautkan dengan apl Google).

Kotak masukan

Teg

ialah elemen HTML yang digunakan untuk membuat borang berasaskan web interaktif untuk pengguna menyerahkan data. Terdapat pelbagai jenis data input bergantung pada jenis peranti dan pengguna. Elemen ialah salah satu elemen yang paling popular dan biasa digunakan dalam HTML kerana pelbagai jenis data input dan atributnya.

Berikut ialah sintaksnya -

<input type= "value" id= "demo" name= "demo">

Salin selepas log masuk

NOTA - Gunakan teg untuk menentukan unsur unsur . Atribut untuk unsur hendaklah sama dengan id unsur .

Css Hover Properties

:hover ialah kelas pseudo CSS yang membolehkan pengguna mengetahui bahawa peranti penunjuk telah diklik atau dialihkan ke atas elemen tertentu itu. Contohnya, jika anda menuding pada elemen pada halaman, warna fon atau warna latar belakangnya mungkin berubah berdasarkan sifat CSS yang ditentukan.

Contoh

Lihat contoh di bawah -

<!DOCTYPE html>
<html>
<head>
   <title> CSS buttons </title>
   <style>
      button{
         margin: 10px 5px 10px 10px;
         padding: 5px;
         color: blue;
      }
      button:hover{
         color: red;
         font-size: 20px;
      }
   </style>
</head>
<body>
   <h1> Hovering on a Button </h1>
   <button> Click Me! </button>
</body>
</html>

Salin selepas log masuk

Selepas melayang di atas elemen Butang, warna teks di dalamnya akan berubah daripada biru kepada merah. Selain itu, saiz fon teks akan meningkat.

Sifat bayang kotak

Sifat

box-shadow membolehkan pembangun menggunakan satu atau lebih bayang-bayang pada elemen. Tetapkan berbilang kesan hanya dipisahkan dengan koma.

Contoh

<!DOCTYPE html>
<html>
<head>
   <style>
      #demo {
         border: 5px solid;
         padding: 10px 15px;
         box-shadow: -5px -10px 0px 5px grey;
      }
   </style>
</head>
<body>
   <h1> The box-shadow property</h1>
   <article id="demo"></article>
</body>
</html>

Salin selepas log masuk

Buat penyerlahan kotak input

Untuk membuat kotak input seperti bar carian Google, kita perlu mengikuti langkah berikut -

Buat medan input dengan type="text".
Laraskan ketinggian dan lebarnya menggunakan CSS. Gunakan sifat bayang kotak untuk memberikan kesan bayang kepada medan input.
Untuk menjadikannya serupa dengan bar carian Google, kesan bayangan harus ditunjukkan pada tuding, jadi kami akan menggunakan sifat tuding CSS.

Contoh

<!DOCTYPE html>
<html>
<head>
   <title> Input search box </title>
   <style>
      body{
         background-color: cyan;
      }
      h1{
         color: #00F00;
         text-decoration: underline;
      }
      #search-box{
         width: 350px;
         height: 20px;
         border-radius: 21px;
         text-align: center;
         border: 1px solid #EDEADE;
         outline: none;
         display: block;
      }
      #search-box:hover{
         box-shadow: 4px 4px 4px grey;
         cursor: pointer;
      }
      input:hover {
         box-shadow: 0px 1px 3px rgb(192, 185, 185);
      }
      button{
         padding: 2px 7px;
         border-radius: 3px;
         border: none;
         cursor: pointer;
      }
   </style>
</head>
<body>
   <center>
      <div class= "box">
      <h1> Tutorialspoint </h1>
      <input type= "text" id= "search-box"> <br> <br>
      <button> Search </button>
   </center>
</body>
</html>

Salin selepas log masuk

Kesimpulan

Dalam artikel ini, kami membincangkan cara membuat kotak input serupa dengan bar carian Google yang menyerlahkan pada tuding.

Atas ialah kandungan terperinci Bagaimana untuk membuat bar carian Google (seperti kotak input) diserlahkan pada hover menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!