كيف يمكنني تطبيق صورة خلفية لإدخال نص دون فقدان الحدود الافتراضية في متصفحات Firefox و WebKit؟

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

سؤال

لسبب ما، سيتوقف معظم المتصفحات الحديثة عن تطبيق نمط حدود الإدخال الافتراضي إلى صناديق النص إذا أعطيتها صورة خلفية. بدلا من ذلك تحصل على هذا الأسلوب القبيح القبيح. من ما يمكنني معرفة أنه لا توجد طريقة CSS لتطبيق نمط المتصفح الافتراضي أيضا.

أي 8 ليس لديه هذه المشكلة. Chrome 2 و Firefox 3.5 do وأفترض متصفحات أخرى أيضا. من ما قرأته عبر الإنترنت، أي 7 لديه نفس المشكلة، ولكن هذا المنشور لم يكن لديك حل.

إليك مثال:

<html>
<head>
  <style>
    .pictureInput {
      background-image: url(http://storage.conduit.com/images/searchengines/search_icon.gif);
      background-position: 0 1px;
      background-repeat: no-repeat;
    }
  </style>
<body>
  <input type="text" class="pictureInput" />
  <br />
  <br />
  <input type="text">
</body>
</html>

في الكروم 2 يبدو هذا: http://www.screencast.com/users/jadeonly/folders/snagit/media/d4ee9819-c92a-4bc2-b84e-e3a4ed6843b6.

وفي فايرفوكس 3.5: http://www.screencast.com/users/jadeonly/folders/snagit/media/d70dd690-9273-45fb-9893-14b38202dcc.

تحديث: JS Solution: ما زلت آمل أن أجد حل نقي في الإدخال، ولكن هنا الحل الذي سأستمر فيه الآن. يرجى ملاحظة أن هذا هو الذي تم لصقه مباشرة من التطبيق الخاص بي، لذلك ليس مثالا لطيفا وموقفا مثل أعلاه. لقد قمت فقط بتضمين الأجزاء ذات الصلة من تطبيق الويب الرئيسي الخاص بي. يجب أن تكون قادرا على الحصول على هذه الفكرة. HTML هو الإدخال مع فئة "الرابط". موقف الخلفية الرأسية الكبيرة هو لأنها العفريت. تم اختباره في IE6، IE7، IE8، FF2، FF3.5، Opera 9.6، Opera 10، Chrome 2، Safari 4. أحتاج إلى تعديل موقف الخلفية بضعة بكسل في بعض المتصفحات لا يزال:

JS:

 $$('input.link').each(function(el) {
   new Element('span',{'class':'linkIcon'}).setText(' ').injectBefore(el);
   if (window.gecko) el.setStyle('padding', '2px 2px 2px 19px');
 });

CSS:

input.link { padding-left: 19px; }
span.linkIcon { z-index: 2; width: 19px; height: 19px; position: absolute; background-image: url(img/fields.gif); background-position: 1px -179px; background-repeat: no-repeat; }

تحديث: CSS إغلاق محلول ما يكفي: بناء على الاقتراح من KRON إليك CSS لجعل المدخلات تطابق FF و IE في Vista مما يجعل خيارا جيدا إذا قررت التخلي عن الإعدادات الافتراضية النقية وفرض نمط واحد. لقد قمت بتعديله قليلا وأضاف الآثار "الزرقاء":

CSS:

input[type=text], select, textarea {
    border-top: 1px #acaeb4 solid;
    border-left: 1px #dde1e7 solid;
    border-right: 1px #dde1e7 solid;
    border-bottom: 1px #e3e9ef solid;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    padding: 2px;
}
input[type=text]:hover, select:hover, textarea:hover, input[type=text]:focus, select:focus, textarea:focus {
    border-top: 1px #5794bf solid;
    border-left: 1px #c5daed solid;
    border-right: 1px #b7d5ea solid;
    border-bottom: 1px #c7e2f1 solid;
}
select { border: 1px; }
هل كانت مفيدة؟

المحلول

عند تغيير نمط الحدود أو الخلفية على مدخلات النص، يعودون إلى وضع التقديم الأساسي للغاية. عادة ما تكون مدخلات النص التي هي على غرار نظام التشغيل عادة (مثل الفلاش) الذي يتم تقديمه أعلى المستند.

لا أعتقد أن هناك إصلاح CSS نقي لمشكلتك. أفضل شيء للقيام به - في رأيي - هو اختيار نمط تريد ومحاكاةها مع CSS. بحيث لا يهم المتصفح الذي أنت فيه، فإن المدخلات ستبدو هي نفسها. لا يزال بإمكانك الحصول على تأثيرات تحوم وما شابه ذلك. آثار توهج نمط OS X قد تكون صعبة، لكنني متأكد من أنها قابلة للقيام بها.

@ alex morales: الحل الخاص بك زائدة عن الحاجة. الحدود: 0؛ يتم تجاهله لصالح الحدود: 1PX الصلبة # ABADB3؛ ونتائج البايت غير الضرورية المنقولة عبر السلك.

نصائح أخرى

هذا هو CSS الذي أستخدمه يمكنه توفير نظرة الافتراضية:

input, select, textarea {
    border-top: 1px #acaeb4 solid;
    border-left: 1px #dde1e7 solid;
    border-right: 1px #dde1e7 solid;
    border-bottom: 2px #f1f4f7 solid;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}

يمكنك أيضا تطبيق :active وإعطاء الضوابط ذلك أزرق هوى بمجرد تحديدها.

تحديث!

حسنا، إليك حلوة أعتقد أنها متصفح متوافق. ستكون المشكلة الوحيدة هي أن النمط الافتراضي يختلف ببعض البكسلات، لذلك قد يحتاج هذا إلى بعض التغيير والتبديل.

<html>
    <head>
        <style>
            .pictureInput {
                text-indent: 20px;
            }
            .input-wrapper {
                position:relative;
            }
            .img-wrapper {
                position:absolute;
                top:2px;
                left:2px;
            }
        </style>
    </head>
    <body>
        <div class="input-wrapper">
            <div class="img-wrapper"><img src="http://storage.conduit.com/images/searchengines/search_icon.gif" alt="asddasd" /></div>
            <input type="text" class="pictureInput" />
        </div>
        <br />
        <br />
        <input type="text">
    </body>
</html>

باستخدام تحديد المواقع النسبية المطلقة، يمكنك إجراء DIV المطلق (الذي يحتوي على الصورة) مطلقا فيما يتعلق بالقلب الذي أعرفه جميع المتصفحات التي أعرفها عن (وليس عد الإصدارات الفرعية IE6، IE6 + بخير) يمكن التعامل معها. قد يكون تحجيم المستخدم مشكلة، ولكن هذا هو كيف هو مع الحلول.

على الجانب العلوي، ليس عليك تغيير الأساليب الموجودة على مدخلاتك على الإطلاق (باستثناء المسافة البادئة للنص، لكن كنت تفعل ذلك على أي حال آمل).

على الجانب السلبي، ليس أجمل الحل البديل.

عمر او قديم!

أعلم أن هذا ليس ما تريده، ولكن يمكنك القيام بشيء من هذا القبيل على الأقل جعل كل حدود الإدخال متسقة.

input {
    border-color:#aaa;
    border-width:1px;
}

example image

لم أحاول ذلك في جميع المتصفحات، ولكن نظرا لأنك لا تقم بتحديد نمط الحدود، فقد يستخدمه النمط الأصلي ولكن بحجم آخر (على الرغم من أنه يمكنك تخطي ذلك أيضا). أعتقد أن المفتاح هو مجرد تعيين لون الحدود لشيء ما بحيث تستخدم جميع حقول الإدخال نفس لون الحدود وتترك الاستراحة حتى المتصفح.

كان لدي صورة خلفية نصية، وكان هذا أيضا مزعج لي. لذلك وضعت قريبu003Cdiv style=";text-align:right;direction:rtl"> جولةu003Cinput> ثم إضافة الصورة وضعت تماما علىu003Cinput> وبعد

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

مع القليل من الاضطراب، بدا هذا جيدا جيدا مع IE8 و Firefox و Chrome و Opera، لكنه Kludge فظيعا وسوف يكون لطيفا إذا تم إصلاح المتصفحات.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top