Googleの検索ボックスのCSSの秘密は何ですか？

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

  •  05-09-2019
  •  | 
  •  

質問

私はGoogleが彼らのUIを作成するために使用するCSSの方法を勉強しています。私は彼らのホーム・ページ上のCSSコードは、その検索ボックスへの参照が含まれていないことに気づきました。それがないボーダー、背景画像や、通常の境界線を型にはめるために使用される規則のいずれかと、単に裸の入力タグのように思えます。そして、まだそれは色合いやグラデーションの種類だけでなく表示することができますが、それはやや円形であり、また、カーソルのフォーカスに反応します。

だから、あなたの推測は私と同じくらい良いです。それをチェックアウトし、私はこの謎の底に得るのを助けるためにあなたのFirebugを使用してください。

http://www.google.com/する

編集：だけ明確にするために、私は美的判断をしようとしていませんよ。いかなるCSSを使用せずに

- 私はGoogleのホームページのミニマリズムは素晴らしいと思いますが、私は彼らの検索ボックスの周りに境界線を型にはめるために使用される技術を見つけるのは本当に興味があります。
役に立ちましたか？

解決

あなたは、Macを使用していますか？ラウンドネイティブUI要素のすべてが輝き、ではない、と色を変更できますか？

あなたは、あなたがそれを検出できずにページのUIを変更することができ、Googleツールバーのような任意のアドオンを持っていますか？

編集：質問では、約尋ねた技術が実際にブラウザで行うにはCSSとは何の関係も、すべてを持っていません。 Googleのホームページ上のテキスト入力は、それに適用されていないCSSスタイルを持っていないので、それがどのように見えるかを決定するために、ブラウザに任されています。ここでは、フィールドはGoogle Chromeでフォーカスがあるとき、それは次のようになります。

の削除死んImageShackのリンクの

他のヒント

は秘密。これは、通常のテキストボックスです... Googleのホームページは、常に有名なミニマリストされています。

自分のホームページについてはよく分からないが、彼らは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;
}

それはそれはあなたがこのブラウザで任意のテキストボックスに焦点を当て、外側グロー効果を適用し、すべてのChromeについてです。

さて、Firefoxなどの一部のブラウザがCSS3を読み取ることができていることをuが、角の丸みを持つようにそれを使用することができますイム今、それを使用して！まだW3Cによってその有効ではないもののます。

彼らは検索ボックスをstylizingているように、

それは見ていません。しかし、彼らがしたい場合、彼らは単にネイティブ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