无图像、自定义样式的搜索栏答案

【问题标题】：Image-free, custom-styled search bar无图像、自定义样式的搜索栏
【发布时间】：2012-11-27 01:02:11
【问题描述】：

我正在与设计师合作，他向我发送了以下网页搜索栏设计：

除非完全必要，否则我非常反对在网页设计中使用图像，所以我希望我可以在 CSS 中重新创建整个搜索栏小部件。我知道如何处理边界半径、渐变、框阴影等，所以这不是问题。

问题：假设 CSS3 浏览器兼容，我该如何重新创建实际的搜索按钮（放大镜部分），其具有双曲线边缘和左下角的轻微阴影？

想法：我最初的感觉是搜索按钮将是圆形且独立的，然后以负的左边距与搜索输入 div 重叠，但后来我不确定我会如何得到那个阴影。

编辑：我并不完全反对将图像用作放大镜，但我之前在 CSS 中看到过 similar icon created。图像与纯 CSS 最终会以相同的速度加载，还是我应该尽我所能在纯 CSS 中完成？

【问题讨论】：

你能告诉我们你的代码吗？
我在这个特定的设计上没有任何进展，因为我一直在使用 UX 进行交互。这是当前的搜索框：jonathonmoore.com/proto/index2.html。它被设计为一个 jQuery 小部件，可以轻松插入到具有单个 div 的页面中。

标签： css

【解决方案1】：

以不同的方式解决问题，您可以使用字体来渲染放大镜。有一些免费的here，您可以通过 JS 或通过使用类似FontSquirrel 的服务创建@font-face 来加载它们。这个附带了所有必要的文件，它包括指向任一方向的放大镜：http://www.tenbytwenty.com/sosa.php

从那里，您应该能够使用 CSS 对其进行样式设置，使其看起来像您的设计师想要的那样。

【讨论】：

我在一些地方读到过这些，但从未真正尝试过它们。这是一个很好的选择。仍然不确定如何实现这种独特的按钮样式。
你能用border-radius:10px吗？在将容纳放大镜的容器上，然后在该容器上尝试一个带有偏移的盒子阴影？

【解决方案2】：

这样的事情会管理

<style type="text/css">
form {
    background-image: url(1noty.png);
    height: 50px;
    width: 240px;
}
input {
    background-image: url(bg.png);
    margin-top: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
    margin-left: 17px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}
</style>

【讨论】：

能解释一下表单背景图片吗？