测试你的技能：高级样式

在我们的第一个高级样式任务中，我们希望您处理使搜索输入在不同浏览器中尽可能一致的问题——即使在现代浏览器上，这比标准文本输入更棘手。

我们已经为您提供了一个基本的重置作为基础。

1. 首先，尝试在不同浏览器中为搜索框设置一致的宽度、高度、填充和边框颜色。
2. 您会发现某些浏览器在表单元素的高度方面不会表现一致。这是因为在某些情况下使用了本机操作系统样式。如何删除此本机样式？
3. 删除本机样式后，您需要添加回它提供的功能之一，以保持我们最初具有的相同外观和感觉。您如何做到这一点？
4. 在不同浏览器（尤其是在 Safari 中）中不一致的一件事是标准蓝色焦点轮廓的位置。如何删除它？
5. 仅仅去除蓝色焦点轮廓存在一个主要问题。是什么？您可以添加某种样式以使用户能够分辨搜索框何时被悬停或聚焦吗？
6. 另一个通常表示搜索框的是放大镜图标。我们在 HTML 文件的同一目录中提供了一个——请参阅search-24px.png——以及搜索输入后的<div>元素，以帮助您附加它（如果需要）。您可以想出一个合理的方法来附加它吗？并且您可以使用一些 CSS 使它位于搜索框的右侧并垂直对齐吗？

尝试更新下面的实时代码以重新创建完成的示例

在我们的下一个任务中，我们为您提供了一组三个单选按钮。我们希望您为它们提供自定义样式。

我们已经为您提供了一个基本的重置作为基础。

1. 首先，去除它们的默认样式。
2. 接下来，为单选按钮设置一个合理的基准样式——页面首次加载时具有的样式。这可以是您喜欢的任何样式，但您可能希望设置宽度和高度（大约 18 到 24 像素之间），以及微妙的边框和/或背景颜色。
3. 现在，为单选按钮在选中时设置不同的样式。
4. 将单选按钮与标签很好地对齐。

尝试更新下面的实时代码以重新创建完成的示例

在本评估系列的最后一个任务中，我们为您提供了一个已经进行了精美样式设计的反馈表单——如果您已完成我们的UI 伪类文章，您已经看到过类似的东西，现在我们希望您提出自己的解决方案。

我们希望您做的是利用一些高级伪类来提供一些有用的有效性指示器。

1. 首先，我们希望您提供一些特定的样式，以直观地指示哪些输入必须填写——它们不能留空。
2. 其次，我们希望您提供一个有用的视觉指示器，指示每个输入中输入的数据是否有效。