قم بتغيير لون العنصر النائب لإدخال HTML5 مع CSS

https://stackoverflow.com/questions/2610497

25-09-2019
|

سؤال

Chrome يدعم سمة العنصر النائب على input[type=text] عناصر (ربما يفعل آخرون أيضًا).

لكن ما يلي CSS لا تفعل أي شيء لقيمة العنصر النائب:

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}

<input type="text" placeholder="Value">

Value سيبقى grey بدلاً من red.

هل هناك طريقة لتغيير لون النص النائب؟

المحلول

تطبيق

هناك ثلاثة تطبيقات مختلفة: العناصر الزائفة ، والفئات الزائفة ، ولا شيء.

تستخدم WebKit و Blink (Safari و Google Chrome و Opera 15+) و Microsoft Edge عنصرًا زائفًا: ::-webkit-input-placeholder. ^{[المرجع]}
يستخدم Mozilla Firefox 4 إلى 18 فئة زائفة: :-moz-placeholder (واحد القولون). ^{[المرجع]}
يستخدم Mozilla Firefox 19+ عنصرًا زائفًا: ::-moz-placeholder, ، لكن المحدد القديم سيظل يعمل لفترة من الوقت. ^{[المرجع]}
يستخدم Internet Explorer 10 و 11 فئة زائفة: :-ms-input-placeholder. ^{[المرجع]}
أبريل 2017: تدعم معظم المتصفحات الحديثة العناصر الزائفة البسيطة ::placeholder ^{[المرجع]}

لا يدعم Internet Explorer 9 و Lower placeholder تنسب على الإطلاق ، بينما Opera 12 و Lower لا تدعم أي محدد CSS للعناصر النائبة.

النقاش حول أفضل تطبيق لا تزال مستمرة. لاحظ أن العناصر الزائفة تعمل مثل العناصر الحقيقية في الظل دوم. أ padding على input لن تحصل على نفس لون الخلفية مثل العناصر الزائفة.

محددات CSS

يتعين على وكلاء المستخدمين تجاهل قاعدة مع محدد غير معروف. نرى المحددات المستوى 3:

أ مجموعة من المحددات التي تحتوي على محدد غير صالح غير صالح.

لذلك نحن بحاجة إلى قواعد منفصلة لكل متصفح. وإلا فإن المجموعة بأكملها سيتم تجاهلها من قبل جميع المتصفحات.

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #909;
}

<input placeholder="Stack Snippets are awesome!">

ملاحظات الاستخدام

كن حذرا لتجنب التباينات السيئة. يبدو أن العنصر النائب لـ Firefox يتخلف عن السداد مع انخفاض العتامة ، لذلك يحتاج إلى الاستخدام opacity: 1 هنا.
لاحظ أنه يتم قطع نص العنصر النائب فقط إذا لم يكن مناسبًا - حجم عناصر الإدخال الخاصة بك في em واختبارها مع إعدادات حجم الخط الأدنى الكبيرة. لا تنس الترجمات: بعض اللغات بحاجة إلى مساحة أكبر لنفس الكلمة.
المتصفحات مع دعم HTML ل placeholder ولكن بدون دعم CSS لذلك (مثل الأوبرا) يجب اختباره أيضًا.
تستخدم بعض المتصفحات CSS افتراضية إضافية للبعض input الأنواع (email, search). قد تؤثر هذه على التقديم بطرق غير متوقعة. استخدم ال الخصائص -webkit-appearance و -moz-appearance لتغيير ذلك. مثال:

    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

نصائح أخرى

/* do not group these rules */
*::-webkit-input-placeholder {
    color: red;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: red;
    opacity: 1;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: red;
    opacity: 1;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: red;
}
*::-ms-input-placeholder {
    /* Microsoft Edge */
    color: red;
}
*::placeholder {
    /* modern browser */
    color: red;
}

<input placeholder="hello"/> <br />
<textarea placeholder="hello"></textarea>

هذا سوف يصمم كل شيء input و textarea العناصر النائبة.

ملاحظة مهمة: لا تجمع هذه القواعد. بدلاً من ذلك ، قم بعمل قاعدة منفصلة لكل محدد (محدد غير صالح في مجموعة يجعل المجموعة بأكملها غير صالحة).

قد ترغب أيضًا في نمط Textareas:

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #636363;
}

إلى عن على bootstrap و أقل المستخدمون ، يوجد Mixin .placeholder:

// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
  &:-moz-placeholder {
    color: @color;
  }
  &:-ms-input-placeholder {
    color: @color;
  }
  &::-webkit-input-placeholder {
    color: @color;
  }
}

بالإضافة إلى إجابة Toscho ، لاحظت بعض التناقضات بين WebKit بين Chrome 9-10 و Safari 5 مع خصائص CSS المدعومة التي تجدر الإشارة إليها.

على وجه التحديد Chrome 9 و 10 لا يدعمان background-color, border, text-decoration و text-transform عند تصميم العنصر النائب.

مقارنة المتصفح الكامل هنا.

إلى عن على ساس المستخدمون:

// Create placeholder mixin
@mixin placeholder($color, $size:"") {
  &::-webkit-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &::-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-ms-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
}

// Use placeholder mixin (the size parameter is optional)
[placeholder] {
  @include placeholder(red, 10px);
}

هذا سوف يعمل بشكل جيد. العرض التوضيحي هنا:

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #666;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #666;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #666;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #666;
}

<input type="text" placeholder="Value" />

في Firefox و Internet Explorer ، يتجاوز لون نص الإدخال العادي خاصية اللون من العناصر النائبة. لذلك ، نحن بحاجة إلى

::-webkit-input-placeholder { 
    color: red; text-overflow: ellipsis; 
}
:-moz-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
}
::-moz-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
} /* For the future */
:-ms-input-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
}

حل المتصفح المتقاطع:

/* all elements */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* individual elements: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual elements: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

تنسب إليه: ديفيد والش

استخدم الجديد ::placeholder كما ترى Autoprefixer.

لاحظ أن. placeholder mixin من bootstrap تم إهماله لصالح هذا.

مثال:

input::placeholder { color: black; }

عند استخدام AutopreFixer ، سيتم تحويل أعلاه إلى الكود الصحيح لجميع المتصفحات.

الآن لدينا طريقة قياسية لتطبيق CSS على العنصر النائب للمدخلات: ::placeholder العنصر الزائف من هذه CSS وحدة المستوى 4.

أنا فقط أدرك شيئًا بالنسبة لـ Mozilla Firefox 19+ أن المتصفح يعطي قيمة عتامة للعنصر النائب ، وبالتالي فإن اللون لن يكون ما تريده حقًا.

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #eee; opacity:1;
}
input:-moz-placeholder, textarea:-moz-placeholder {
    color: #eee; opacity:1;
}
input::-moz-placeholder, textarea::-moz-placeholder {
    color: #eee; opacity:1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #eee; opacity:1;
}

أنا أكتب opacity ل 1 ، لذلك سيكون من الجيد الذهاب.

لا أتذكر أين وجدت مقتطف الرمز هذا على الإنترنت (لم يكتب من قبلي ، لا تتذكر المكان الذي وجدته فيه ، ولا من كتبه).

$('[placeholder]').focus(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function() {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur();
    $('[placeholder]').parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        })
    });

ما عليك سوى تحميل رمز JavaScript هذا ثم قم بتحرير حاملك النائب باستخدام CSS عن طريق استدعاء هذه القاعدة:

form .placeholder {
   color: #222;
   font-size: 25px;
   /* etc. */
}

أعتقد أن هذا الرمز سيعمل لأن هناك حاجة إلى عنصر نائب فقط لنص نوع الإدخال. لذلك سيكون هذا السطر الواحد CSS كافيًا لحاجتك:

input[type="text"]::-webkit-input-placeholder {
    color: red;
}

إلى عن على bootstrap المستخدمين ، إذا كنت تستخدم class="form-control", ، قد يكون هناك مشكلة خصوصية CSS. يجب أن تحصل على أولوية أعلى:

.form-control::-webkit-input-placeholder {
    color: red;
}
//.. and other browsers

أو إذا كنت تستخدم أقل:

.form-control{
    .placeholder(red);
}

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

إذا كنت تحاول تغيير العنصر النائب داخل أ .form-control فئة CSS ثم يجب عليك تجاوزها على هذا النحو:

.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #777;
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #777;
    opacity:  1;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #777;
    opacity:  1;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #777;
}

هذا الرمز القصير والنظيف:

::-webkit-input-placeholder {color: red;}
:-moz-placeholder           {color: red; /* For Firefox 18- */}
::-moz-placeholder          {color: red; /* For Firefox 19+ */}
:-ms-input-placeholder      {color: red;}

وماذا عن هذا

<input type="text" value="placeholder text" onfocus="this.style.color='#000'; 
    this.value='';" style="color: #f00;" />

لا CSS أو عنصر نائب ، لكنك تحصل على نفس الوظيفة.

لقد جربت كل مجموعة هنا لتغيير اللون ، على منصة هاتفي ، وفي النهاية كان ذلك:

-webkit-text-fill-color: red;

التي فعلت الخدعة.

لمستخدم SASS/SCSS باستخدام بوربون, ، لديها وظيفة مدمجة.

//main.scss
@import 'bourbon';

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

إخراج CSS ، يمكنك أيضًا الحصول على هذا الجزء واللصق في الكود الخاص بك.

//main.css

input {
  width: 300px;
}

input::-webkit-input-placeholder {
  color: red;
}
input:-moz-placeholder {
  color: red;
}
input::-moz-placeholder {
  color: red;
}
input:-ms-input-placeholder {
  color: red;
}

جرب هذا الرمز للحصول على عنصر إدخال مختلف نمط مختلف

your css selector::-webkit-input-placeholder { /*for webkit */
    color:#909090;
    opacity:1;
}
 your css selector:-moz-placeholder { /*for mozilla */
    color:#909090;
    opacity:1;
}
 your css selector:-ms-input-placeholder { /*for for internet exprolar */ 
   color:#909090;
   opacity:1;
}

مثال 1:

input[type="text"]::-webkit-input-placeholder { /*for webkit */
    color: red;
    opacity:1;
}
 input[type="text"]:-moz-placeholder { /*for mozilla */
    color: red;
    opacity:1;
}
 input[type="text"]:-ms-input-placeholder { /*for for internet exprolar */ 
   color: red;
   opacity:1;
}

مثال 2:

input[type="email"]::-webkit-input-placeholder { /*for webkit */
    color: gray;
    opacity:1;
}
 input[type="email"]:-moz-placeholder { /*for mozilla */
    color: gray;
    opacity:1;
}
 input[type="email"]:-ms-input-placeholder { /*for for internet exprolar */ 
   color: gray;
   }

هنا مثال آخر:

.form-control::-webkit-input-placeholder {
  color: red;
  width: 250px;
}
h1 {
  color: red;
}

<div class="col-sm-4">
  <input class="form-control" placeholder="Enter text here.." ng-model="Email" required/>
</div>

إضافة احتمال حقيقي وبسيط حقيقي للغاية: مرشحات CSS!

سوف يصمم كل شيء ، بما في ذلك العنصر النائب.

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

input {
  filter: sepia(100%) saturate(400%) grayscale(0) contrast(200%) hue-rotate(68deg) invert(18%);
}

<input placeholder="Hello world!" />
<input type="date" /><br>
<input type="range" />
<input type="color" />

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

من: https://codepen.io/nico_krazhtest/pen/bwexeb

function stylElem() {
  stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0)
  Array.from(document.querySelectorAll('input, audio, video')).forEach(function(e){
      e.style.cssText += ";filter:sepia(100%) saturate(400%)grayscale(0)contrast(200%)hue-rotate("+ stylo.dataset.hue+"deg)invert("+(stylo.dataset.hue/3.6)+"%)"
  out.innerText = e.style.cssText
})()}

stylElem()

<div id="out"></div> <p>
  <input placeholder="Hello world!" />
  <input type="date" /><br>
  <input type="range" />
  <input type="color" />
Colors (change me)-> 
<input type="color" id="stylo" oninput="stylElem()" /> <br><br>
<audio controls src="#"></audio> <br><br> 
<video controls src="#"></video>

مستندات مرشحات CSS: https://developer.mozilla.org/en-us/docs/web/css/filter

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

*::-webkit-input-placeholder { /* WebKit browsers */
    color:    #ccc;
}
*:-moz-placeholder { /* Mozilla Firefox <18 */
    color:    #ccc;
    opacity:  1;
}
*::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #ccc;
    opacity:  1;
}
*:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #ccc;
}

يمكنك تغيير اللون النائب لإدخال HTML5 مع CSS. إذا كان عن طريق الصدفة ، يتعارض مع CSS ، فإن ملاحظة الرمز هذه تعمل ، يمكنك استخدام (! مهم) مثل أدناه.

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:#909 !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:#909 !important;
   opacity:1 !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:#909 !important;
   opacity:1 !important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:#909 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:#909 !important;
}

<input placeholder="Stack Snippets are awesome!">

أتمنى أن يساعد هذا.

يمكنك استخدام هذا للدخول وأسلوب التركيز:

input::-webkit-input-placeholder  { color:#666;}
input:-moz-placeholder  { color:#666;}
input::-moz-placeholder { color:#666;}
input:-ms-input-placeholder  { color:#666;}
/* focus */
input:focus::-webkit-input-placeholder { color:#eee; }
input:focus:-moz-placeholder { color:#eee } /* FF 4-18 */
input:focus::-moz-placeholder { color:#eee } /* FF 19+ */
input:focus:-ms-input-placeholder { color:#eee } /* IE 10+ */

أسهل طريقة هي:

#yourInput::placeholder {
    color: red;/*As an example*/
}
/* if that would not work, you can always try styling the attribute itself: */
#myInput[placeholder] {
    color: red;
}

بوصلة لديه مزيج لهذا خارج الصندوق.

خذ مثالك:

<input type="text" placeholder="Value">

وفي SCSS باستخدام Compass:

input[type='text'] {
  @include input-placeholder {
    color: #616161;
  }
}

راجع مستندات ل mixin inport-placeholder.

هنا هو الحل مع محددات CSS

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}

::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}

WebKit ، Blink (Safari ، Google Chrome ، Opera 15+) و Microsoft Edge يستخدمون العنصر الزائف:
::-WebKit-Input-Placeholder.
موزيلا فايرفوكس 4 إلى 18 يستخدم الفئة الزائفة:
: -moz-placeholder (قولون واحد).
Mozilla Firefox 19+ يستخدم العنصر الزائف:
::-Moz-Placeholder ، لكن المحدد القديم سيظل يعمل لفترة من الوقت.
Internet Explorer 10 و 11 يستخدمون الفئة الزائفة:
: -MS-Input-placeholder.
Internet Explorer 9 و Lower لا يدعم سمة العنصر النائب على الإطلاق ، في حين أن Opera 12 و Lower لا تدعم أي محدد CSS للأصحاب النائب.

جزء من HTML:

 <form action="www.anything.com">
 <input type="text" name="name"
  placeholder="Enter sentence"/>
  </form>

سأوضح كيفية تغيير لون التعبير عن "إدخال الجملة" بواسطة CSS:

  ::placeholder{
  color:blue;
   }

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow