Question

我正在研究Google用来创建自己的ui的css方法。我意识到他们主页上的css代码没有引用他们的搜索框;它似乎只是一个裸输入标签，没有边框，背景图像或通常用于样式化边框的任何约定。然而它不仅可以显示色调和一种渐变，而且还略微圆，并且还会对光标焦点做出反应。

所以，你的猜测和我一样好。请使用你的Firebug进行检查，并帮助我到达这个谜语的底部。

http://www.google.com/

编辑：为了清楚起见，我不是要做出美学判断。虽然我认为谷歌主页的极简主义非常棒，但我真的很想知道他们用来在搜索框周围设计边框的技巧 - 不使用任何CSS。

Answer 1

你使用的是mac吗？是不是所有原生UI元素都圆形，发光和改变颜色？

您是否有Google工具栏等附加内容，可能会修改页面的UI而无法检测到它？

编辑：在问题中询问的技术实际上与CSS无关，而与浏览器有关。 Google主页上的文本输入没有应用CSS样式，因此留给浏览器决定它的外观。以下是该字段在Google Chrome中关注时的效果：

删除了死亡的ImageShack链接

Answer 2

不是秘密。这是一个普通的文本框...谷歌的主页一直都是极简主义的。

Answer 3

不确定他们的主页，但他们在Gmail中也是如此，并且涉及到CSS：

.mFwySd:focus
{
border:2px solid #73A6FF !important; 
margin:0 !important;
outline-color:-moz-use-text-color !important; 
outline-style:none !important; 
outline-width:0 !important; 
}

.mFwySd {
background-color:#FFFFFF;
border-color:#666666 #CCCCCC #CCCCCC;
border-style:solid;
border-width:1px;
color:#000000;
}

Answer 4

这完全取决于Chrome，当您使用此浏览器专注于任何文本框时，它会应用外部发光效果。

Answer 5

它们看起来不像搜索框的样式。但如果他们想要他们可以使用原生HTML标记input。你只需要在CSS文件中引用它。

input {
     padding:???;
     margin:???;
     background:url(http://www.???.???/images/???.???) #FFF no-repeat 0 0;
     color:#??????;
     text-align:????;
     font:normal ?em/?em arial;
}

这只会覆盖搜索字段框。如果您需要覆盖按钮，只需在按钮输入字段中添加一个类。

我总是使用.btn

input.btn {
     padding:???;
     margin:???;
     background:url(http://www.???.???/images/???.???) #FFF no-repeat 0 0;
     color:#??????;
     text-align:????;
     font:normal ?em/?em arial;
}

现在，这可以让您完全控制整个网站上的任何input字段。

Answer 6

现在某些浏览器如firefox能够读取css3你可以使用它来获得角半径，我现在正在使用它！虽然它还没有被w3c认可。

Google搜索框的CSS秘密是什么？

6 个答案: