Google 搜索框的 CSS 秘密是什么？
我正在研究 Google 用于创建用户界面的 CSS 方法。 我意识到他们主页上的 CSS 代码不包含对搜索框的引用； 它看起来只是一个裸露的输入标签，没有边框、背景图像或任何通常用于风格化边框的约定。 然而，它不仅可以显示色调和某种渐变，而且它略呈圆形，并且还会对光标焦点做出反应。
所以，你的猜测和我的一样好。 请使用你的 Firebug 来检查一下，并帮助我找到这个谜题的真相。
编辑：澄清一下，我并不是想做出审美判断。 虽然我认为 Google 主页的极简主义非常棒，但我真的很想了解他们用来风格化搜索框周围边框的技术 - 不使用任何 CSS。
I am studying the css methods Google uses to create their ui. I realized that the css code on their home page contains no reference to their search box; it seems like just a naked input tag, with not a border, background image or any of the conventions normally used to stylize a border. And yet it can display not only a hue and a kind of gradient, but it is slightly round and also reacts to the cursor focus.
So, your guess is as good as mine. Please use your Firebug to check it out and help me get to the bottom of this riddle.
EDIT: Just to be clear, I'm not trying to make an aesthetic judgment. Although I think minimalism of Google's homepage is fantastic, I am really interested to find out the techniques they used to stylize the borders around their search box -- without using any css whatsoever.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
你用的是Mac吗？ 所有原生 UI 元素不是都是圆形、发光和变色的吗？
您是否有任何附加组件（例如 Google 工具栏）可以在您无法检测到的情况下修改页面的 UI？
编辑：问题中询问的技术实际上与 CSS 无关，而与浏览器有关。 Google 主页上输入的文本没有应用 CSS 样式，因此由浏览器决定其外观。 当该字段在 Google Chrome 中获得焦点时，效果如下：
删除了失效的 ImageShack 链接
Are you using a mac? Aren't all of the native UI elements round, glow, and change color?
Do you have any add-ons like the Google Toolbar which could be modifying the UI of the page without you being able to detect it?
Edit: The technique asked about in the question really has nothing to do with CSS and everything to do with the browser. The text input on the Google home page has no CSS style applied to it and is therefore left to the browser to decide how it looks. Here's what it looks like when the field has focus in Google Chrome:
removed dead ImageShack link
没有秘密。 这是一个普通的文本框...谷歌的主页一直以极简主义着称。
No secret. It's a normal text box... Google's home page has always famously been minimalist.
不确定他们的主页，但他们在 Gmail 中做了同样的事情，并且涉及 CSS：
not sure about their home page, but they do the same in Gmail, and there's CSS involved:
这一切都与 Chrome 有关，当您使用此浏览器聚焦于任何文本框时，它会应用外部发光效果。
It is all about Chrome, it applies an outer glow effect when you focus on any textbox with this browser.
现在一些浏览器（例如 firefox）能够读取 css3，您可以使用它来设置圆角半径，我现在正在使用它！ 尽管它尚未被 w3c 认可。
Now that the some browser such as firefox are able to read css3 u can use that to have corner radius, im using it now! although its not valid by w3c yet.
看起来他们并没有对搜索框进行风格化。 但如果他们愿意，可以使用原生 HTML 标签
input。 您只需在 CSS 文件中引用它即可。这只会覆盖搜索字段框。
如果您需要覆盖按钮，只需在按钮输入字段中添加一个类即可。
我总是使用
.btn现在，这应该可以让您完全控制整个网站上的任何
input字段。It does not look like they are stylizing the search box. But if they wanted to they could just use the native HTML tag
input. You just have to reference it in the CSS file.This would just cover the search field box.
If you needed to cover the button, just add a class to your button input field.
I always use
.btnNow this should give you complete control over any
inputfield on you entire website.