為什么我的焦點偽 class 不起作用？

Question

我正在我的頁面 header 中使用帶有輸入和按鈕的表單元素容器制作搜索欄。 當 hover 在其上以及您單擊它時，我正在使表單更改顏色。

即使我將：活動偽類放在同一個選擇器塊中，焦點偽類也無法正常工作。

片段：

 /* general css */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: "calibri"; }.header h2 { margin: 15px; padding: 10px; color: azure; }.header h2 a { color: azure; text-decoration: none; }.header h2 a:hover { color: rgb(255, 24, 81); }.sponsers img, .social-media img { width: 40px; }.sponsers img { filter: grayscale(100%); -webkit-filter: grayscale(100%); }.nav-menu ul{ margin: 10px; } /*general css end*/.header { background-color: rgba(0, 0, 0, .6); background-image: url("/Images/blogimage.jfif"); background-blend-mode:multiply; background-size:cover; margin: 0; display: grid; grid-template-columns: auto auto auto; }.header h1 { grid-column: 1 / 3; margin: 2em; color: aliceblue; width: 100%; min-width: 0; overflow: hidden; white-space: initial; word-wrap: break-word; text-align: center; }.nav-menu li { display: inline; padding: 0 5%; }.nav-menu a { display: inline-block; padding: 15px; text-decoration: none; color: aliceblue; font-weight: bold; }.nav-menu a:hover { background-color: rgba(225, 225, 225, .3); color: rgb(255, 24, 81); border-radius: 30px; }.search-bar { display: flex; border-radius: 30px; border: none; outline: none; height: 30px; width: 250px; margin: 15px; padding: 10px; background-color: rgba(236, 220, 220, 0.817); align-items: center; align-content: stretch; justify-content: center; }.search-bar input { border: none; outline: none; background: transparent; color: black; border-radius: inherit; padding: 8px; margin: o; color: inherit; flex: 1; overflow: hidden; }.search-bar:hover { background-color: rgba(255, 24, 81, .6); }.search-bar:active, .search-bar:focus { background-color: rgba(134, 131, 181, 0.3); }.search-bar:hover::placeholder { color: rgba(236, 220, 220, 0.817); }.search-bar:focus::placeholder { color: rgba(67, 60, 60, 0.6); }.search-bar button { border-radius: inherit; width: 30px; height: 30px; border: none; outline: none; padding: 0; margin: 0; background: transparent; overflow: hidden; cursor: pointer; }.search-bar img { size: 30px; width: 17px; height: 17px; }

 <header class="main-container header"> <h2 class="header-element main-header"><a href="index.html">blog name</a></h2> <nav class="header-element nav-menu"> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About Us</a></li> <li><a href="contact.html">Contact Us</a></li> </ul> </nav> <form class="header-element search-bar" action=""> <input type="search" placeholder="search the blog"> <button type="submit"> <img src="/images/loupe.png" alt="search-image"> </button> </form> <h1 class="header-element title">Read fresh fake test blog insights in this fake test blog site which is fake and is just a fake test</h1> </header>

Answer 1

您必須在表單內輸入select 之后，您將獲得預期的結果。 這是解決方案

.search-bar input:hover::placeholder {
     color: rgba(236, 220, 220, 0.817);
}

.search-bar input:focus::placeholder {
     color: rgba(67, 60, 60, 0.6);
}