CSS لإخفاء زر الإدخال قيمة النص
https://stackoverflow.com/questions/600438
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
أنا حاليا التصميم وهي <input type='button'/> عنصر مع CSS التالية:
background: transparent url(someimage);
color: transparent;
أريد زر لتظهر كصورة ، ولكن لا أريد value النص إلى العرض على أعلى من ذلك.هذا يعمل بشكل جيد for Firefox كما هو متوقع.ومع ذلك ، على إنترنت إكسبلورر 6 و Internet Explorer 7 أنا لا تزال ترى النص.
لقد حاولت كل أنواع الحيل لإخفاء النص ، ولكن من دون نجاح.هل هناك حل لجعل إنترنت إكسبلورر تتصرف ؟
(إنني مضطر إلى استخدام type=button لأن هذا هو دروبال شكل وشكله API لا يدعم الصور من نوع.)
المحلول
لماذا أنت بما في ذلك السمة value على الإطلاق؟ من الذاكرة، لا تحتاج إلى تحديد ذلك (على الرغم من معايير HTML قد يقول لك القيام به - لست متأكدا). إذا كنت بحاجة إلى سمة value، لماذا لا مجرد القول value=""؟
إذا كنت لا تأخذ هذا النهج، سوف CSS الخاص بك يحتاج خصائص إضافية للارتفاع وعرض صورة الخلفية.
نصائح أخرى
وأنا استخدم
button {text-indent:-9999px;}
* html button{font-size:0;display:block;line-height:0} /* ie6 */
*+html button{font-size:0;display:block;line-height:0} /* ie7 */
وكان لي مشكلة المعاكس (عملت في Internet Explorer، ولكن ليس في فايرفوكس). لإنترنت إكسبلورر، تحتاج إلى إضافة الحشو الأيسر، وفايرفوكس، تحتاج إلى إضافة لون شفاف. حتى هنا لدينا حل مجتمعة لزر أيقونة 16px 16px س:
input.iconButton
{
font-size: 1em;
color: transparent; /* Fix for Firefox */
border-style: none;
border-width: 0;
padding: 0 0 0 16px !important; /* Fix for Internet Explorer */
text-align: left;
width: 16px;
height: 16px;
line-height: 1 !important;
background: transparent url(../images/button.gif) no-repeat scroll 0 0;
overflow: hidden;
cursor: pointer;
}
وأيضا:
وfont-size: 0;
line-height: 0;
وعمل رائع بالنسبة لي!
هل حاولت تعيين الخاصية نص البادئة إلى شيء من هذا القبيل -999em؟ هذا هو وسيلة جيدة لنص "اخفاء".
وأو يمكنك تعيين حجم الخط إلى 0، والذي سيعمل أيضا.
الفرق بعض من كنت ترى في الحلول التي تعمل في مختلف المنشأ قد يكون بسبب وجود وضع التوافق أو إيقاف تشغيله.في IE8, text-indent يعمل على ما يرام إلا إذا وضع التوافق تشغيل.إذا وضع التوافق ، ثم حجم الخط و خط الطول تفعل خدعة ولكن يمكن أن تصل الفوضى فايرفوكس العرض.
حتى نتمكن من استخدام css هاك السماح فايرفوكس تجاهل لدينا أي حكم..مثل ذلك...
text-indent:-9999px;
*font-size: 0px; line-height: 0;
استخدم عبارات شرطية في أعلى المستند HTML:
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
وبعد ذلك في CSS إضافة
.ie7 button { font-size:0;display:block;line-height:0 }
ومأخوذة من HTML5 بويليربليت - بشكل أكثر تحديدا paulirish.com/ 2008 / الشرطية-الأنماط-مقابل-CSS-الخارقة الإجابة-لا /
وكان هذا لوحظ من مكان ما:
واضاف النص تحويل لإدخال لحذفها
input.button {
text-indent:-9999px;
text-transform:capitalize;
}
والكتابة إلى ملف CSS الخاص بك:
#your_button_id
{
color: transparent;
}
طلب font-size: 0.1px; إلى الزر يعمل بالنسبة لي في فايرفوكس، وإنترنت إكسبلورر 6، وإنترنت إكسبلورر 7، وسفاري. أي من الحلول الأخرى التي وجدتها عمل في جميع المتصفحات.
وoverflow:hidden وpadding-left وغرامة يعمل بالنسبة لي.
لفايرفوكس:
width:12px;
height:20px;
background-image:url(images/arrow.gif);
color:transparent;
overflow:hidden;
border:0;
لوالكيانات المستقلة:
padding-left:1000px;
وهذا يعمل في فايرفوكس 3، إنترنت إكسبلورر 8، وإنترنت إكسبلورر 8 وضع التوافق، أوبرا، وسفاري.
* ملاحظة: خلية الجدول الذي يحتوي تمت padding:0 هذا وtext-align:center
background: none;
background-image: url(../images/image.gif);
background-repeat:no-repeat;
overflow:hidden;
border: NONE;
width: 41px; /*width of image*/
height: 19px; /*height of image*/
font-size: 0;
padding: 0 0 0 41px;
cursor:pointer;
وكان لي نفس المشكلة جدا. والعديد من الوظائف الأخرى ذكرت: خدعة الحشو يعمل فقط لIE
. وfont-size:0px لا يزال يظهر بعض النقاط الصغيرة.
والشيء الوحيد الذي عملت بالنسبة لي وتفعل العكس
font-size:999px
و... ولكن لم يكن لدي سوى أزرار 25x25 بكسل.
color:transparent; /* For FF */
*padding-left:1000px ; /* FOR IE6,IE7 */
هذا بعد عمل أفضل بالنسبة لي:
HTML:
<input type="submit"/>
CSS:
input[type=submit] {
background: url(http://yourURLhere) no-repeat;
border: 0;
display: block;
font-size:0;
height: 38px;
width: 171px;
}
إذا كنت لا تضع value على <input type="submit"/> فإنه سيتم وضع النص الافتراضي "إرسال" داخل الزر الخاص بك.لذا مجرد مجموعة font-size: 0; على تقديم الخاص بك ثم تأكد من تعيين height و width لمداخلاتكم نوع بحيث تظهر صورتك.لا ننسى استفسارات وسائل الإعلام على تقديم الخاص بك إذا كنت في حاجة إليها ، على سبيل المثال:
CSS:
@media (min-width:600px) {
input[type=submit] {
width:200px;
height: 44px;
}
}
وهذا يعني عندما تكون الشاشة في تمام 600px واسعة أو أكبر على زر تغيير أبعاد
وبدلا من ذلك، لا مجرد hook_form_alter وجعل زر زر صورة وانت القيام به!
وcolor:transparent; ثم أي ممتلكات text-transform لا حيلة للغاية.
وعلى سبيل المثال:
color: transparent;
text-transform: uppercase;
