0

我正在尝试重新创建 apple.com 可拉伸的焦点搜索框。我已经让它工作了，但我的拉伸背景图像作为他们的接缝优雅地添加到它没有放大镜拉伸。他们还设法将一种背景淡化为另一种背景。

这是我的 CSS

#header input {
    background:url(http://www.golfbrowser.com/images/icons/search.png) no-repeat top right;
    padding:2px;
    margin-top:8px;
    margin-right:10px;
    padding-left:18px;
    font-family:"Lucida Grande", Arial, sans-serif;
    font-size:12px;
    color:#222;
    border:0px;
    background-color:none;
    float:right;
    width:140px;
    background-size:160px 20px;
}
#header input:focus {
    background:url(http://www.golfbrowser.com/images/icons/search-z.png) no-repeat top right;
    transition: width 0.5s, background-size 0.5s, background 0.5s;
    -moz-transition: width 0.5s, background-size 0.5s, background 0.5s;
    -webkit-transition: width 0.5s, background-size 0.5s, background 0.5s;
    -o-transition: width 0.5s, background-size 0.5s, background 0.5s;
    width:180px;
    background-size:200px 20px;
}
#header input:blur {
    transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s;
    width:140px;
    background-size:160px 20px;
}

实施见http://www.golfbrowser.com/

4

2 回答 2

0

我根本看不到你的放大镜伸展。在 Chrome 中对我来说看起来不错。你把这个 CSS 放在你想要的地方了吗？

Apple 的代码方法与您的略有不同。当搜索框聚焦时，他们使用 javascript 将类“searchmode”添加到 nav 元素。这允许他们调整/转换所有内容。全 CSS 方法受到以下事实的限制：伪类（实际上没有 CSS 选择器）永远不会影响父元素，甚至不会影响 DOM 中选定元素之前的兄弟元素。我看到的一个行为差异是你的盒子在悬停时变白，而苹果的盒子在被选中之前保持白色。我很确定你想要那样做。

顺便说一句，您不能转换背景图像，期间。这包括背景渐变。这不是一个已知问题，只是规范的一个事实。

于 2012-05-31T03:17:04.723 回答
0

如果您将其添加到列表中，背景颜色也可以转换。至于基于gecko2.0的背景图片有一个已知问题，只能过渡渐变图片。

希望这会有所帮助:)

于 2011-05-14T20:37:42.900 回答