測試你的技能：高階樣式

在我們的第一個高階樣式任務中，我們希望您處理使搜尋輸入在不同瀏覽器中儘可能一致的問題——即使在現代瀏覽器上，這比標準文字輸入更棘手。

我們已經為您提供了一個基本的重置作為基礎。

1. 首先，嘗試在不同瀏覽器中為搜尋框設定一致的寬度、高度、填充和邊框顏色。
2. 您會發現某些瀏覽器在表單元素的高度方面不會表現一致。這是因為在某些情況下使用了本機作業系統樣式。如何刪除此本機樣式？
3. 刪除本機樣式後，您需要添加回它提供的功能之一，以保持我們最初具有的相同外觀和感覺。您如何做到這一點？
4. 在不同瀏覽器（尤其是在 Safari 中）中不一致的一件事是標準藍色焦點輪廓的位置。如何刪除它？
5. 僅僅去除藍色焦點輪廓存在一個主要問題。是什麼？您可以新增某種樣式以使使用者能夠分辨搜尋框何時被懸停或聚焦嗎？
6. 另一個通常表示搜尋框的是放大鏡圖示。我們在 HTML 檔案的同一目錄中提供了一個——請參閱search-24px.png——以及搜尋輸入後的<div>元素，以幫助您附加它（如果需要）。您可以想出一個合理的方法來附加它嗎？並且您可以使用一些 CSS 使它位於搜尋框的右側並垂直對齊嗎？

嘗試更新下面的即時程式碼以重新建立完成的示例

在我們的下一個任務中，我們為您提供了一組三個單選按鈕。我們希望您為它們提供自定義樣式。

我們已經為您提供了一個基本的重置作為基礎。

1. 首先，去除它們的預設樣式。
2. 接下來，為單選按鈕設定一個合理的基準樣式——頁面首次載入時具有的樣式。這可以是您喜歡的任何樣式，但您可能希望設定寬度和高度（大約 18 到 24 畫素之間），以及微妙的邊框和/或背景顏色。
3. 現在，為單選按鈕在選中時設定不同的樣式。
4. 將單選按鈕與標籤很好地對齊。

嘗試更新下面的即時程式碼以重新建立完成的示例

在本評估系列的最後一個任務中，我們為您提供了一個已經進行了精美樣式設計的反饋表單——如果您已完成我們的UI 偽類文章，您已經看到過類似的東西，現在我們希望您提出自己的解決方案。

我們希望您做的是利用一些高階偽類來提供一些有用的有效性指示器。

1. 首先，我們希望您提供一些特定的樣式，以直觀地指示哪些輸入必須填寫——它們不能留空。
2. 其次，我們希望您提供一個有用的視覺指示器，指示每個輸入中輸入的資料是否有效。