无图像，自定义样式的搜索栏

Question

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

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

问题：假设CSS3浏览器兼容性，我该如何重新创建具有双曲面边缘的实际搜索按钮（放大镜部分），以及左下方的轻微阴影？< / p>

思考：我最初的感觉是搜索按钮是圆形的，独立的，然后将搜索输入div与负左边距重叠，但后来我不确定如何获得那个投影。

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

Answer 1

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

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

Answer 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>