it-swarm.asia

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

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

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

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}
<input type="text" placeholder="Value">

Value ستظل grey بدلاً من red.

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

3791
David Murdoch

التنفيذ

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

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

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

النقاش حول أفضل تطبيق لا يزال مستمراً. لاحظ أن العناصر الزائفة تعمل كعناصر حقيقية في Shadow DOM . لن يحصل 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 لذلك (مثل Opera) أيضًا.
  • تستخدم بعض المتصفحات CSS افتراضيًا إضافيًا لبعض أنواع input (email ، search). قد تؤثر هذه على التقديم بطرق غير متوقعة. استخدم الخصائص-webkit-appearance و -moz-appearance لتغيير ذلك. مثال:
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }
4678
fuxia
/* 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.

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

692
brillout

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

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

من أجل Bootstrap و أقل المستخدمين ، يوجد mixin .placeholder:

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

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

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

المقارنة عبر المستعرض الكامل هي هنا .

95
ajcw

ل ساس المستخدمين:

// 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);
}
73
Konst_

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

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" />
57
Love Trivedi

في 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; 
}
46
Dionysios Arvanitis

حل عبر المستعرض:

/* 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; }

الائتمان: ديفيد والش

39
Kristian

استخدم ::placeholder الجديد إذا كنت تستخدم autoprefixer .

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

مثال:

input::placeholder { color: black; }

عند استخدام الإصلاح التلقائي ، سيتم تحويل ما سبق إلى الرمز الصحيح لجميع المتصفحات.

37
Mike Jerred

الآن لدينا طريقة قياسية لتطبيق CSS على عنصر نائب لإدخال: ::placeholder pseudo-element from this CSS Module Level 4 Draft.

37
user3790069

لقد أدركت شيئًا لموزيلا فايرفوكس 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 ، لذلك سيكون من الجيد الانتقال.

34
Burak Tokak

لا أتذكر المكان الذي عثرت فيه على مقتطف الشفرة هذا على الإنترنت (لم يكن مكتوبًا عليه ولا أتذكر أين عثرت عليه أو من كتبه).

$('[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. */
}
33
Dragos Rizescu

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

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

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

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

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

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

وماذا عن هذا

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

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

17
user1729061

إذا كنت تستخدم 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;
}
17
steady_daddy

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

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

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

-webkit-text-fill-color: red;

التي فعلت الحيلة.

14
aviram83

لمستخدم SASS/SCSS الذي يستخدم Bourbon ، لديه وظيفة مضمنة.

//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;
}
7
trungk18

جرب هذا الكود لعنصر الإدخال المختلف

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;
   }
7
Md. Abu Sayed

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

 enter image description here

 enter image description here

 enter image description here

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

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

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

5
Cryptopat

هنا مثال آخر:

.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>
5
Mahendra Kulkarni

حسنًا ، تتصرف العناصر النائبة بشكل مختلف في المتصفحات المختلفة ، لذلك تحتاج إلى استخدام بادئة المتصفح في 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;
}
4
Alireza

يمكنك تغيير لون عنصر نائب لإدخال 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!">

آمل أن يكون هذا سوف يساعد.

3
Deepak Kumar

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

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+ */
2
fraweb

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

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

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

خذ مثالك:

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

وفي SCSS باستخدام البوصلة:

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

راجع المستندات الخاصة بمزيج عنصر نائب الإدخال.

1
bendav91

جرب هذا سيساعدك على أن يعمل هذا في جميع متصفحات fav:

::-webkit-input-placeholder { 
    /* Chrome/Opera/Safari */
      color: pink;
    }
    ::-moz-placeholder { 
    /* Firefox 19+ */
      color: pink;
    }

    :-moz-placeholder { 
    /* Firefox 18- */
      color: pink;
    }
0
Anand

لون عنصر نائب على عنصر معين في متصفحات مختلفة.

HTML

<input class='contact' type="email" placeholder="[email protected]">

CSS 

    .contact::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      color: pink;
    }
    .contact::-moz-placeholder { /* Firefox 19+ */
      color: pink;
    }
    .contact:-ms-input-placeholder { /* IE 10+ */
      color: pink;
    }
    .contact:-moz-placeholder { /* Firefox 18- */
      color: pink;
    }
0
Majedur Rahaman