সিএসএস সহ একটি এইচটিএমএল 5 ইনপুট এর স্থানধারক রঙ পরিবর্তন করুন

Question

ক্রোম সমর্থন করে input[type=text] উপাদানগুলির উপর স্থানধারক বৈশিষ্ট্যটিকে (অন্যরা সম্ভবত এটিও করেন)।

কিন্তু নিম্নলিখিত CSSস্থানধারকের মানটির জন্য কিছুই করে না:

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

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

Value এখনও থাকবে grey পরিবর্তেred ।

স্থানধারকের পাঠ্যের রঙ পরিবর্তন করার কোনও উপায় আছে কি?

Comments

কুইক হেড-আপ (কোনও সমাধান নয়, কেবল একটি FYI): যদি আমি সঠিকভাবে স্মরণ করি তবে ইনপুট [স্থানধারক] কেবলমাত্র <ইনপুট> ট্যাগগুলির সাথে মেলে যা একটি স্থানধারক বৈশিষ্ট্যযুক্ত, এটি প্লেসহোল্ডার বৈশিষ্ট্যের সাথে মেলে না।

— গোলাপী গথিক

হ্যাঁ, চিন্তা আমার মনকে অতিক্রম করেছিল যে এটি কোনও উপাদানের "শিরোনাম" গুণকে স্টাইল করার চেষ্টা করার মতো হতে পারে। একইভাবে চিন্তা করার জন্য +1!

— ডেভিড মারডোক

@ ম্যাথিয়াসবাইনেন্স : স্থানধারক-দেখানো সিউডো-শ্রেণীর একটি ইনপুট উপাদান মেলে যা এই জাতীয় স্থানধারক পাঠ্য দেখায় showing সুতরাং এটি নির্বাচকের <input>মতো ট্যাগের সাথে মেলে input, তবে ঠিক এখনই স্থানধারক পাঠ্য দেখাচ্ছে। এটি স্থানধারক বৈশিষ্ট্যের সাথেও মেলে না।

— এইচএক্স

@ হেক্স এটি inputনির্বাচকের মতো নয় কারণ এটি সমস্ত inputউপাদান নির্বাচন করে। :placeholder-shownকেবলমাত্র inputসেই উপাদানগুলি নির্বাচন করে যা বর্তমানে স্থানধারক দেখায়, আপনাকে কেবল সেই উপাদানগুলিকেই স্টাইল করতে দেয় এবং কার্যকরভাবে স্থানধারক পাঠ্যকে স্টাইল করে। তুমি কি বলতে চাচ্ছ?

— ম্যাথিয়াস বাইনেস

@ হেক্স (অবশ্যই, এটি এমন textareaউপাদানগুলিও নির্বাচন করেছে যা স্থানধারক পাঠ্য দেখায়।)

— ম্যাথিয়াস বায়েন্স

Answer 1

বাস্তবায়ন

তিনটি পৃথক বাস্তবায়ন রয়েছে: ছদ্ম-উপাদান, সিউডো-ক্লাস এবং কিছুই নয়।

• ওয়েবকিট, নাচা (সাফারি, গুগল ক্রোম, অপেরা 15+) এবং মাইক্রোসফট এজ একটি সিউডো-উপাদান ব্যবহার করছেন: ::-webkit-input-placeholder। ^{[ রেফারেন্স ]}
• মোজিলা ফায়ারফক্স 4 থেকে 18 সিউডো-ক্লাস ব্যবহার করছে: :-moz-placeholder( একটি কোলন)। ^{[ রেফারেন্স ]}
• মোজিলা ফায়ারফক্স ১৯++ একটি সিউডো-এলিমেন্ট ব্যবহার করছে: ::-moz-placeholderতবে পুরানো নির্বাচকটি এখনও কিছু সময়ের জন্য কাজ করবে। ^{[ রেফারেন্স ]}
• ইন্টারনেট এক্সপ্লোরার 10 এবং 11 একটি ছদ্ম ক্লাসের ব্যবহার করছেন: :-ms-input-placeholder। ^{[ রেফারেন্স ]}
• এপ্রিল 2017: বেশিরভাগ আধুনিক ব্রাউজারগুলি সাধারণ ছদ্ম-উপাদানকে সমর্থন করে ::placeholder ^{[ রেফ ]}

ইন্টারনেট এক্সপ্লোরার 9 এবং নিম্নতর placeholderএট্রিবিউটটিকে মোটেই সমর্থন করে না , অপেরা 12 এবং নিম্নটি ​​সমর্থন করে না স্থানধারকদের জন্য কোনও সিএসএস নির্বাচককে ।

সেরা বাস্তবায়ন সম্পর্কে আলোচনা এখনও চলছে। নোট করুন ছদ্ম-উপাদানগুলি শেডো ডিওমে আসল উপাদানের মতো কাজ করে । একটি paddingঅনinput সিউডো-এলিমেন্টের মতো একই পটভূমির রঙ পাবে না।

সিএসএস নির্বাচক

ব্যবহারকারীর এজেন্টদের অজানা নির্বাচক সহ কোনও নিয়ম উপেক্ষা করা দরকার। দেখুন নির্বাচক স্তর 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!">

ব্যবহারের নোট

• খারাপ বৈপরীত্য এড়াতে সাবধানতা অবলম্বন করুন। ফায়ারফক্সের স্থানধারক হ্রাস করা অস্বচ্ছতার সাথে ডিফল্ট হয়ে গেছে বলে ব্যবহার করা দরকারopacity: 1 এখানে
• মনে রাখবেন যে স্থানধারক পাঠ্যটি উপযুক্ত না হলে কেবল কেটে ফেলা হয় - এতে আপনার ইনপুট উপাদানগুলিকে আকার দিন emএবং বড় ন্যূনতম ফন্ট আকারের সেটিংসের মাধ্যমে তাদের পরীক্ষা করুন। অনুবাদগুলি ভুলে যাবেন না: কিছু ভাষার আরও বেশি ঘর প্রয়োজন একই শব্দের জন্য ।
• এইচটিএমএল সমর্থন সহ ব্রাউজারগুলি placeholder তবে এর সিএসএস সমর্থন ছাড়াই (অপেরার মতো )ও পরীক্ষা করা উচিত।
• কিছু ব্রাউজার কিছু inputধরণের ( email, search) জন্য অতিরিক্ত ডিফল্ট সিএসএস ব্যবহার করে । এগুলি অপ্রত্যাশিত উপায়ে রেন্ডারিংকে প্রভাবিত করতে পারে। বৈশিষ্ট্যগুলি ব্যবহার করুন -webkit-appearanceএবং -moz-appearanceএটি পরিবর্তন করুন। উদাহরণ:

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

Comments

আরও লক্ষ করুন যে যদিও ওয়েবকিট এটিকে বরং শক্তিশালী নির্দিষ্টতা বলে মনে করে, মজিলা তা করে না। জিনিসগুলি দেখানোর জন্য আপনাকে সেখানে কয়েকজন পপ করার সম্ভাবনা রয়েছে!

— dmnc

@ টসচো: দুর্দান্ত উত্তরের জন্য ধন্যবাদ। আমার কেবল এটি "লাইভ" এর সামান্য প্রদর্শনের দরকার ছিল, তাই আপনার উদাহরণটি এখানেও পৌঁছানো যায়: jsfiddle.net/Sk8erPeter/KyVXK । আবার ধন্যবাদ.

— Sk8erPeter

ফায়ারফক্সের স্থানধারক হ্রাস করা অস্বচ্ছতার সাথে ডিফল্ট হয়ে গেছে। অন্য কারও

— পক্ষে স্নেহ

আইই 10 *:-ms-input-placeholderএবং :-ms-input-placeholderনিজেই কাজ করে না, তবে INPUT:-ms-input-placeholderকরে। অস্বাভাবিক.

— জেয়ার্ড

বুটস্ট্র্যাপ 3 এর জন্য দ্রষ্টব্য: "ফর্ম-নিয়ন্ত্রণ" শ্রেণিটি সিএসএস নির্দিষ্টতার কারণে রঙকে ওভাররাইড করে (যেমন "ফর্ম-নিয়ন্ত্রণ :: - ওয়েবকিট-ইনপুট-স্থানধারক"), সুতরাং আপনাকে কমপক্ষে নির্দিষ্ট হিসাবে বা ব্যবহারের প্রয়োজন "গুরুত্বপূর্ণ!" আপনার সিএসএসে (ফায়ারবাগ বা দেবতুল কেউই এই ছদ্ম শ্রেণীর দেখায় বলে মনে হচ্ছে না)

— কোস্টা

Answer 2

/* 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স্থানধারীদের স্টাইল করবে ।

গুরুত্বপূর্ণ দ্রষ্টব্য: এই বিধিগুলি গোষ্ঠীভুক্ত করবেন না। পরিবর্তে, প্রতিটি নির্বাচকের জন্য একটি পৃথক বিধি তৈরি করুন (একটি গ্রুপে একজন অবৈধ নির্বাচনকারী পুরো গ্রুপকে অবৈধ করে তোলে)।

Comments

এমএসডিএন ডক যার সাথে আপনি লিঙ্ক করেছেন, এটি কেবলমাত্র ইন্টারনেট এক্সপ্লোরার 10-এ সমর্থিত states

— ডেনিশোয়েল

বাস্তবিকভাবে, আপনি আইডি দ্বারা প্রতিটি পৃথক ইনপুট স্টাইল না করে একসাথে সাইট জুড়ে স্থানধারীদের স্টাইল করতে চাইছেন।

— BadHorsie

এফএফ 19 এর পরে আপনার :: :: মোজ-স্থানধারক

— ভাইপ্লেজার

আপনি যদি স্টাইলশিটের নীচে এই সিএসএস স্থাপন করতে চান তবে আপনি যদি ইনপুটটিতে কোনও ক্লাসও প্রয়োগ করেন, যাতে এটি (11) এ কাজ করতে পারে। জেএসফিডেল jsfiddle.net/9kkef এই কাঁটাচামচ দেখুন । আইই এবং অন্য ব্রাউজার উভয়ই পৃষ্ঠাটি খুলুন, আইইতে আপনি দেখতে পাবেন যে স্থানধারক পাঠ্যটি প্রয়োগ শ্রেণীর রঙে থাকবে।

— টিমো 2002

কখনও কখনও যদি কাজ না করা হয় তবে দয়া করে রঙের সম্পত্তিতে <! গুরুত্বপূর্ণ> যুক্ত করুন।

— আহমেদ না।

Answer 3

আপনি টেক্সটরিয়াস স্টাইল করতেও পারেন:

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

Comments

ক্রোমে মুদ্রণ কাজ করে না ... কোনও সহায়তা @ মিডিয়া মুদ্রণ {ইনপুট [টাইপ করুন = পাঠ্য] .ফর্ম-নিয়ন্ত্রণ :: - ওয়েবকিট-ইনপুট-স্থানধারক, ইনপুট [টাইপ = টেক্সারিয়া] .ফর্ম-নিয়ন্ত্রণ :: - ওয়েবকিট - ইনপুট-স্থানধারক {রঙ: #FFFFFF; }}

— মাহদী আলখতিব

Answer 4

জন্য বুটস্ট্র্যাপ এবং কম ব্যবহারকারীদের, একটি mixin .placeholder হল:

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

Comments

বা এমনকি সহজ, ভেরিয়েবল সম্পাদনা করুন @input-color-placeholder- সাধারণত ভেরিয়েবলগুলিতে

— উইলিয়াম

@ উইলিয়াম কি আর কোনও ইনপুট এর স্থানধারককে অন্যরকম রঙ করতে চাইলে সেক্ষেত্রে নির্বাচকটিকে নিজেরাই সংজ্ঞায়িত করা এবং মিক্সিন ব্যবহার করা সহজ হবে না?

— ব্র্যান্ডিটো

@ ব্র্যান্ডিটো - এটি প্রান্তের মতো শোনাচ্ছে - সাধারণত নকশার মধ্যে থাকা সমস্ত ফর্মের উপাদানগুলির জন্য সাধারণত স্থানধারীর রঙ একই।

— উইলিয়াম

@ উইলিয়াম দুঃখিত, আমি এই ধরণের জিনিসগুলি শব্দ করে বলতে ভয়ানক, আমি ভেবেছিলাম যে আপনি যে ইনপুট রঙটি চান তার যুক্তিযুক্ত মিশ্রণটি ব্যবহার করা ভাল তবে আপনি বেশ সততার সাথে বলতে পারেন, আমি সম্ভবত প্রান্তের ঘটনাগুলি নিয়ে ভাবছি আমি অভ্যস্ত (সন্ধান ইনপুট প্লেসোল্ডারকে স্টাইলিং যেখানে এটি রঙিন পটভূমিতে রয়েছে: পি) তাই দুঃখিত তবে আপনি ঠিক বলেছেন, ক্ষমা চাই।

— ব্র্যান্ডিটো

Answer 5

টসচোর জবাব ছাড়াও আমি সিএসএস বৈশিষ্ট্য সমর্থিত ক্রোম 9-10 এবং সাফারি 5 এর মধ্যে কিছু ওয়েবকিটের অসঙ্গতি লক্ষ্য করেছি that

বিশেষ করে ক্রোম 9 ও 10 সমর্থন করে না background-color, border, text-decorationএবং text-transformযখন স্থানধারক স্টাইলিং।

সম্পূর্ণ ক্রস ব্রাউজারের তুলনা এখানে ।

Answer 6

জন্য Sass ব্যবহারকারী:

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

Comments

আরও নমনীয় উপায় - ব্যবহারের জন্য@content;

— মিলভোভস্কি

Answer 7

এটি ভাল কাজ করবে। এখানে ডেমো:

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" />

Comments

আমাকে ফায়ারফক্স v56-তেও যোগ করতে হয়েছিল

— সেভেজ

Answer 8

ফায়ারফক্স এবং ইন্টারনেট এক্সপ্লোরারগুলিতে, সাধারণ ইনপুট পাঠ্যের রঙ স্থানধারকদের রঙের সম্পত্তিকে ওভাররাইড করে। সুতরাং, আমাদের প্রয়োজন

::-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; 
}

Answer 9

ক্রস ব্রাউজার সমাধান:

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

ক্রেডিট: ডেভিড ওয়ালশ

Answer 10

নতুন ব্যবহার করুন ::placeholderযদি আপনি ব্যবহার autoprefixer ।

মনে রাখবেন যে বুটস্ট্র্যাপ থেকে। স্থানধারক মিশ্রণ পক্ষে ।

উদাহরণ:

input::placeholder { color: black; }

উপরের অটোপ্রিফিক্সার ব্যবহার করার সময় উপরের সমস্ত ব্রাউজারের জন্য সঠিক কোডে রূপান্তরিত হবে।

Answer 11

একটি ইনপুট এর স্থানধারকটিতে সিএসএস প্রয়োগ করার এখন আমাদের কাছে একটি স্ট্যান্ডার্ড উপায় রয়েছে: এই সিএসএস মডিউল স্তর 4 খসড়া ::placeholderথেকে সিউডো-উপাদান ।

Comments

এটি ফায়ারফক্স ৫১ এ কাজ করে I'm আমি কেবল এই পদ্ধতিটি ব্যবহার করতে যাচ্ছি; অন্যান্য ব্রাউজারগুলি শীঘ্রই আমার জন্য পর্যাপ্ত পরিমাণে ধরা পড়বে (আদর্শ মানের স্টাইলটি প্রয়োগ না করা থাকলে কোনও কার্যকারিতা নষ্ট হবে না)।

— লনি সেরা

Answer 12

আমি কেবল মোজিলা ফায়ারফক্স 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;
}

আমি opacity1 এর জন্য ওভাররাইট করি , তাই এটি ভাল হবে।

Answer 13

আমার মনে নেই আমি এই কোড স্নিপেটটি ইন্টারনেটে কোথায় পেয়েছি (এটি আমার দ্বারা লেখা হয়নি, মনে রাখবেন না আমি এটি কোথায় পেয়েছি বা কে লিখেছেন)।

$('[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('');
            }
        })
    });

এই জাভাস্ক্রিপ্ট কোডটি লোড করুন এবং তারপরে এই নিয়মটি কল করে CSS সহ আপনার প্লেসোল্ডারকে সম্পাদনা করুন:

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

Comments

এটি এটি করার পুরানো উপায়, যা আমি বেশ খানিকটা ব্যবহার করেছি। অসুবিধাটি হ'ল আপনি ফোকাস করার সময় স্থানধারক পাঠ্য অদৃশ্য হয়ে যায়। আমি যখন ইউআই-তে ইনপুটটির পাশের লেবেলগুলিও অন্তর্ভুক্ত না করে থাকি তখন এটি বিরক্তিকর বলে মনে হয়েছিল। গত বেশ কয়েক মাস ধরে আমি স্থানধারক পাঠ্য ব্যবহার করে এই পদ্ধতির প্রতিস্থাপন শুরু করেছি, যা আমি মনে করি এটি একটি ইউএক্স উন্নতি।

— রেডটোপিয়া

এই জাতীয় কোড সহ অন্যান্য সমস্যাটি হ'ল আপনার সার্ভারসাইড কোডটি খালি ইনপুট হিসাবে স্থানধারক পাঠ্যের সাথে মোকাবেলা করতে হবে, যেখানে আপনি "টাউন" নামক কোনও শহরে প্রবেশ করতে চান এমন প্রান্তের সমস্যা রয়েছে। স্থানধারক পাঠ্যের বিপরীতে মানগুলি পরীক্ষা করার পরিবর্তে আপনার ইনপুটটিতে একটি ডেটা-সংশোধিত পতাকা ব্যবহার করা উচিত এবং পতাকাটি সেট না করা থাকলে ফর্ম জমা দেওয়ার ইনপুটটি সাফ করুন। এবং এজেএক্স ইন্টারফেসের জন্য আপনার কাছে একটি ফর্মও নাও থাকতে পারে, তাই আপনার ইনপুটটির সাথে একটি স্বেচ্ছাসেবী জমা দেওয়ার ইভেন্টটি যুক্ত করতে সক্ষম হওয়া উচিত। এটি সত্যিই সাধারণ পরিস্থিতিগুলির মধ্যে একটি যা এটি নয়।

— ওয়েলকাহোলিজম

Answer 14

আমি মনে করি এই কোডটি কাজ করবে কারণ একটি স্থানধারক কেবল ইনপুট ধরণের পাঠ্যের জন্য প্রয়োজন। সুতরাং এই এক লাইনের সিএসএস আপনার প্রয়োজনের জন্য যথেষ্ট হবে:

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

Comments

এটিকে আর ব্যবহার করবেন না। স্থানধারক এবং আরও উপসর্গ সহ আরও বেশ কয়েকটি উপাদান রয়েছে। উপরের সমাধানগুলি দেখুন বা ::placeholderঅটোপ্রিফিক্সারের সাথে একসাথে ব্যবহার করুন ।

— রিজকিট

Answer 15

জন্য বুটস্ট্র্যাপ ব্যবহারকারী, যদি আপনি ব্যবহার করছেন class="form-control", সেখানে একটি সিএসএস নির্দিষ্টতা ইস্যু হতে পারে। আপনার একটি উচ্চ অগ্রাধিকার পাওয়া উচিত:

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

বা আপনি যদি কম ব্যবহার করছেন :

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

Answer 16

আপনি যদি বুটস্ট্র্যাপ ব্যবহার করেন এবং এই কাজটি করতে না পারেন তবে সম্ভবত আপনি বুথ স্ট্র্যাপ নিজেই এই নির্বাচকদের যুক্ত করার বিষয়টি ভুলে গেছেন। এটি হ'ল বুটস্ট্র্যাপ v3.3 about

আপনি যদি একটি। পারফরম্যান্স-নিয়ন্ত্রণ সিএসএস বর্গের মধ্যে স্থানধারককে পরিবর্তন করার চেষ্টা করছেন তবে আপনার এটির মতো ওভাররাইড করা উচিত:

.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;
}

Answer 17

এই সংক্ষিপ্ত এবং পরিষ্কার কোড:

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

Answer 18

এই সম্পর্কে কিভাবে

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

কোনও সিএসএস বা স্থানধারক নয়, তবে আপনি একই কার্যকারিতা পান।

Comments

কেউ কিছু লেখার পরে আবার ক্লিক করলে কী হয় .. তাদের লেখা মূল লেখাটি চলে যাবে!

— ভাগ্যবান সনি

@ লাকিসনি আপনি এটি করতে পারতেন তবে আমি ব্যক্তিগতভাবে প্রথমটিকে পছন্দ করি। <input type="text" value="placeholder text" onfocus="if(!this.haswriting){this.style.color='#000'; this.value='';}" onblur="if(!this.value){this.style.color='#f00'; this.value='placeholder text'; this.haswriting=false;}else{this.haswriting=true};" style="color: #f00;"/>

— ব্যবহারকারী 1729061

এমনকি আপনার দ্বিতীয় সংস্করণ একই কার্যকারিতা সরবরাহ করে না। যদি ব্যবহারকারী <form>এই ইনপুটটি জমা দেয় তবে স্থানধারক পাঠ্যটি সার্ভারে প্রেরণ করা হবে। অনেকগুলি সাইট এটি অন্যায় করতে দেখেছি।

— lqc

এটা বিপজ্জনক! আপনি আবার ফর্ম ফিরে এসে সবকিছু হারিয়েছেন!

— মোবারক আলী

Answer 19

আমি আমার মোবাইল প্ল্যাটফর্মে রঙ পরিবর্তন করতে এখানে প্রতিটি সংমিশ্রণ চেষ্টা করেছি এবং শেষ পর্যন্ত তা ছিল:

-webkit-text-fill-color: red;

কৌতুকটি করেছে

Comments

This property allows you to specify a fill color for text. If it is not set, then the color property will be used to do the fill.আমার কাছে মনে হচ্ছে আপনি কিছু অন্যান্য সিএসএস বিধি পেয়েছেন যা colorসম্পত্তি নির্ধারণ করছে ।

— ডেভিড মারডোক

Answer 20

ব্যবহার Sass / SCSS ব্যবহারকারীর জন্য বোরবন , এটি একটি বিল্ট-ইন ফাংশন আছে।

//main.scss
@import 'bourbon';

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

সিএসএস আউটপুট, আপনি এই অংশটি দখল করতে পারেন এবং আপনার কোডে পেস্ট করতে পারেন।

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

Answer 21

বিভিন্ন ইনপুট উপাদানকে বিভিন্ন স্টাইলে এই কোডটি ব্যবহার করে দেখুন

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

Answer 22

এখানে আরও একটি উদাহরণ দেওয়া হল:

.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>

Answer 23

একটি বাস্তব খুব সুন্দর এবং সাধারণ সম্ভাবনা যুক্ত করা হচ্ছে: CSS ফিল্টারগুলি !

এটি স্থানধারক সহ সমস্ত কিছুকে স্টাইল করবে।

রঙ পরিবর্তনের জন্য হিউ ফিল্টার ব্যবহার করে নীচে একই প্যালেটে উভয় ইনপুট সেট করবে। এটি এখন ব্রাউজারগুলিতে খুব ভাল রেন্ডার করে (অর্থাত্ ... বাদে)

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

Answer 24

ঠিক আছে, স্থানধারক বিভিন্ন ব্রাউজারগুলিতে আলাদা আচরণ করে, সুতরাং আপনার সিএসএসে ব্রাউজারের উপসর্গগুলি তাদের অভিন্ন করার জন্য আপনার প্রয়োজন যেমন উদাহরণস্বরূপ ফায়ারফক্স ডিফল্টরূপে স্থানধারককে স্বচ্ছতা দেয়, সুতরাং আপনার সিএসএসে অস্বচ্ছতা 1 যুক্ত করতে হবে, রঙটি নয়, এটি নয় বেশিরভাগ সময় একটি বড় উদ্বেগ, তবে এগুলি ধারাবাহিকভাবে রাখা ভাল:

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

Answer 25

আপনি CSS সহ কোনও এইচটিএমএল 5 ইনপুটটির স্থানধারীর রঙ পরিবর্তন করতে পারেন। যদি সুযোগক্রমে, আপনার সিএসএসের দ্বন্দ্ব, এই কোড নোটটি কাজ করছে, আপনি নীচের মতো (! গুরুত্বপূর্ণ) ব্যবহার করতে পারেন।

::-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!">

আশা করি এটি সাহায্য করবে।

Answer 26

আপনি ইনপুট এবং ফোকাস শৈলীর জন্য এটি ব্যবহার করতে পারেন:

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

Answer 27

সবচেয়ে সহজ উপায় হ'ল:

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

Answer 28

বাক্সের বাইরে এই জন্য কম্পাসের একটি মিশ্রণ রয়েছে।

আপনার উদাহরণ নিন:

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

এবং এসসিএসএসে কম্পাস ব্যবহার করে:

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

ইনপুট-স্থানধারক মিক্সিনের জন্য ডক্স দেখুন।

Answer 29

সিএসএস নির্বাচনকারীদের সাথে সমাধানটি এখানে

::-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;
}

• ওয়েবকিট, ব্লিঙ্ক (সাফারি, গুগল ক্রোম, অপেরা 15+) এবং মাইক্রোসফ্ট এজ একটি সিডো-এলিমেন্ট ব্যবহার করছে:
  :: - ওয়েবকিট-ইনপুট-প্লেসোল্ডার।
• মোজিলা ফায়ারফক্স 4 থেকে 18 সিউডো-ক্লাস ব্যবহার করছে
  :: -মোজ-প্লেসোল্ডার (একটি কোলন)।
  মোজিলা ফায়ারফক্স ১৯++ একটি সিউডো-এলিমেন্ট ব্যবহার করছে:
  :: - মোজ-স্থানধারক, তবে পুরানো নির্বাচকটি এখনও কিছু সময়ের জন্য কাজ করবে।
• ইন্টারনেট এক্সপ্লোরার 10 এবং 11 একটি সিউডো-ক্লাস ব্যবহার করছে
  :: -সাম ইনপুট-স্থানধারক।
• ইন্টারনেট এক্সপ্লোরার 9 এবং নিম্নতর স্থানধারক বৈশিষ্ট্যটি মোটেই সমর্থন করে না, অপেরা 12 এবং নিম্নতর স্থানধারকদের জন্য কোনও সিএসএস নির্বাচককে সমর্থন করে না।

Answer 30

এইচটিএমএলের একটি অংশ:

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

সিএসএস দ্বারা 'প্রবেশের বাক্য প্রবেশ করান' এর অভিব্যক্তির রঙ কীভাবে পরিবর্তন করা যায় তা আমি দেখাব:

  ::placeholder{
  color:blue;
   }