3

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

所以，你的猜测和我的一样好。请使用您的 Firebug 来检查它并帮助我解开这个谜题。

http://www.google.com/

编辑：为了清楚起见，我不想做出审美判断。尽管我认为 Google 主页的极简主义非常棒，但我真的很想了解他们用来对搜索框周围的边框进行风格化的技术——而不使用任何 CSS。

4

6 回答 6

10

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

您是否有任何附加组件（例如 Google 工具栏）可以在您无法检测到的情况下修改页面的 UI？

编辑：问题中询问的技术实际上与 CSS 无关，与浏览器有关。Google 主页上的文本输入没有应用 CSS 样式，因此由浏览器决定它的外观。以下是该领域在 Google Chrome 中的焦点时的样子：

删除了无效的 ImageShack 链接

于 2009-02-22T09:59:12.237 回答
2

没有秘密。这是一个普通的文本框... Google 的主页一直以极简主义着称。

于 2009-02-22T09:58:34.017 回答
2

不确定他们的主页，但他们在 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;
}
于 2009-02-22T10:50:16.747 回答
0

这一切都与 Chrome 有关，当您使用此浏览器专注于任何文本框时，它会应用外部发光效果。

于 2009-02-22T10:40:15.850 回答
0

看起来他们没有对搜索框进行样式化。但如果他们愿意，他们可以只使用本机 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整个网站上的任何字段。

于 2009-03-31T16:10:22.147 回答
0

现在某些浏览器（例如 firefox）能够读取 css3，您可以使用它来获得圆角半径，我现在正在使用它！虽然它还不是 w3c 有效的。

于 2010-02-15T02:59:22.207 回答