什么是谷歌搜索框的CSS秘诀是什么？

StackOverflow https://stackoverflow.com/questions/574671

  •  05-09-2019
  •  | 
  •  

题

我学习的CSS方法谷歌用来创建自己的UI。我意识到，在其主页上的CSS代码没有提及他们的搜索框;好像只是一个赤裸裸的输入标签，有没有边框，背景图像或任何通常用来风格化边框的约定。但它可以显示不仅色相和一种梯度的，但它是略圆，也反作用于光标焦点。

所以，你猜我的一样好。请用您的Firebug检查出来，并帮我把这个谜的底部。

http://www.google.com/

编辑：只是要清楚，我并不想作出审美判断。虽然我认为谷歌的主页的极简主义是太棒了，我真的很感兴趣，了解他们使用的风格化在他们的搜索框边框的技术 - 不使用任何的CSS任何

。
有帮助吗？

解决方案

您使用的是Mac？并非所有的本地UI元素的圆形，发光，并改变颜色？

您有任何附加件，如谷歌工具栏可能被修改页面的UI没有你能够检测到它？

编辑：在这个问题问的技术真的无关CSS和一切与浏览器。谷歌主页上的文字输入应用了无CSS样式，因此留给浏览器来决定它的外观。这里是什么样子时，现场已集中在谷歌浏览器：

除去死ImageShack的链接

其他提示

没有秘密。这是一个普通的文本框...谷歌的主页一直以来著名的极简主义。

不知道他们的主页，但他们同样在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;
}

它是所有关于浏览器，它适用于当你专注于与该浏览器的任何文本框的外发光效果。

现在的一些浏览器如Firefox能读CSS3 u能使用它的IM现在使用有角半径！尽管它不是由W3C有效爱好。

它看起来并不像他们风格化的搜索框。但是，如果他们想，他们可以只使用本地的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场完全控制。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top