ما هو سر CSS مربع بحث Google؟

Question

أنا أدرس أساليب CSS تستخدم Google لإنشاء UI. أدركت أن رمز CSS في صفحته الرئيسية لا يحتوي على إشارة إلى مربع بحثهم؛ يبدو وكأنه مجرد علامة إدخال عارية، مع عدم وجود حدود أو صورة خلفية أو أي من الاتفاقيات تستخدم عادة لتجميع الحدود. ومع ذلك، يمكن أن يعرض ليس فقط هوى ونوع من التدرج، لكنه جولة قليلا ويتفاعل أيضا مع التركيز المؤشر.

لذلك، تخمينك هو جيد مثل لي. يرجى استخدام Firebug الخاص بك للتحقق من ذلك ومساعدتي في الوصول إلى أسفل هذا اللغز.

http://www.google.com/

تحرير: فقط أن تكون واضحا، أنا لا أحاول تقديم حكم جمالي. على الرغم من أنني أعتقد أن الحد الأدنى لصفحة Google الرئيسية رائعة، فأنا مهتم حقا بالعثور على التقنيات التي استخدموها لتنسيق الحدود حول مربع بحثهم - دون استخدام أي CSS WhatsoEver.

Answer 1

هل تستخدم ماك؟ ليس كل من عناصر UI الأصلية، وتوهج، وتغيير اللون؟

هل لديك أي إضافات مثل شريط أدوات Google والتي يمكن أن تعدل واجهة المستخدم من الصفحة دون أن تكون قادرا على اكتشافها؟

تحرير: هذه التقنية التي طرحها في السؤال لا علاقة له ب CSS وكل شيء يتعلق بالمتصفح. لا يحتوي إدخال النص على صفحة Google الرئيسية على نمط CSS المطبق عليه، وبالتالي ترك للمتصفح لتحديد كيفية النظر. إليك ما يبدو عليه عندما يركز الحقل في Google Chrome:

إزالة رابط imageshack الميت

Answer 2

لا سر. إنه مربع نص عادي ... كانت الصفحة الرئيسية ل Google كانت دائما ما يكون الحد الأدنى.

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

الآن بعد أن أصبحت بعض المتصفح مثل Firefox قادرا على قراءة CSS3، يمكنك استخدام ذلك للحصول على دائرة نصف قطرها الركن، أنا باستخدامه الآن! على الرغم من أنها غير صالحة بواسطة W3C حتى الآن.

Answer 6

أنها لا تبدو وكأنها تسليف مربع البحث. ولكن إذا أرادوا أن يتمكنوا من استخدام علامة 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 الحقل عليك موقع الويب بالكامل.