CSS ব্যবহার করে HTML5 ইনপুটের প্লেসহোল্ডার রঙ পরিবর্তন করা

ওভারভিউ

HTML5 একটি নতুন অ্যাট্রিবিউট চালু করেছে যাকে placeholder বলা হয়। এই অ্যাট্রিবিউট এবং এলিমেন্টে ব্যবহারকারীকে হিন্ট দেয় যে ফিল্ডে কী লিখা যাবে।</p> <p>এখানে একটি উদাহরণ যা দেখায় প্লেসহোল্ডার কী। ইমেইলের হিন্ট অর্থাৎ email@example.com এখানে প্লেসহোল্ডার:</p> <p><img loading='lazy' alt='CSS ব্যবহার করে HTML5 ইনপুটের প্লেসহোল্ডার রঙ পরিবর্তন করা' src="https://bd.wsxdn.com/UploadFiles_8203/202203/2022033115034520.jpg" /></p> <h2>উদাহরণ ১: প্লেসহোল্ডার অ্যাট্রিবিউট ব্যবহার</h2> <pre class="prettyprint notranslate"><!DOCTYPE HTML> <html> <body> <form action="/cgi-bin/html5.cgi" method="get"> Enter email : <input type="email" name="newinput" placeholder="email@example.com"/> <input type="submit" value="submit" /> </form> </body> </html></pre> <h2>উদাহরণ ২: CSS দিয়ে প্লেসহোল্ডার রঙ পরিবর্তন</h2> <pre class="prettyprint notranslate"><!DOCTYPE HTML> <html> <style> ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #7F0D10; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #7F0D10; opacity: 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #7F0D10; opacity: 1; } </style> <body> <form action="/cgi-bin/html5.cgi" method="get"> Enter email : <input type="email" name="newinput" placeholder="email@example.com"/> <input type="submit" value="submit" /> </form> </body> </html></pre> </article> <div class="ad5"> <script language='javascript' src='/ad/w.js'></script> </div> <section id="turn-page" class="t-over"> <div class="f-start f-align"> <i><img loading='lazy' src="https://bd.wsxdn.com/css/img/sanjiao.svg" alt="ত্রিভুজ"></i> <a class='LinkPrevArticle' href='https://bd.wsxdn.com/ge064y/bz654t/202203/1006062264.html' >CSS ব্যবহার করে <div> ট্যাগ সেন্টার করার উপায়</a> </div> <div class="f-start f-align"> <i><img loading='lazy' src="https://bd.wsxdn.com/css/img/sanjiao.svg" alt="ত্রিভুজ"></i> <a class='LinkNextArticle' href='https://bd.wsxdn.com/ge064y/bz654t/202203/1006062266.html' >CSS marker-offset প্রপার্টির ব্যবহার</a> </div> </section> </div> <aside class="box-r"> <section class="box42"> <ol> <li> <a href="https://bd.wsxdn.com/ge064y/ki653c/202203/1006038871.html" class="f-start"> <span></span> <p class="r-over r-over-2" title="HTML/CSS-এ ব্যাকগ্রাউন্ড রঙ পরিবর্তন করার উপায়">HTML/CSS-এ ব্যাকগ্রাউন্ড রঙ পরিবর্তন করার উপায়</p> </a> </li> <li> <a href="https://bd.wsxdn.com/ge064y/bz654t/202203/1006054609.html" class="f-start"> <span></span> <p class="r-over r-over-2" title="CSS দিয়ে গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড কালার সেট করা">CSS দিয়ে গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড কালার সেট করা</p> </a> </li> <li> <a href="https://bd.wsxdn.com/ge064y/bz654t/202203/1006054616.html" class="f-start"> <span></span> <p class="r-over r-over-2" title="CSS দিয়ে Input Placeholder টেক্সট স্টাইল করা">CSS দিয়ে Input Placeholder টেক্সট স্টাইল করা</p> </a> </li> <li> <a href="https://bd.wsxdn.com/ge064y/bz654t/202203/1006054617.html" class="f-start"> <span></span> <p class="r-over r-over-2" title="CSS দিয়ে টেক্সটে গ্রেডিয়েন্ট কালার যোগ করা">CSS দিয়ে টেক্সটে গ্রেডিয়েন্ট কালার যোগ করা</p> </a> </li> <li> <a href="https://bd.wsxdn.com/ge064y/mj652e/202203/1006056665.html" class="f-start"> <span></span> <p class="r-over r-over-2" title="CSS-এ একটিভ (active) লিংকের রঙ পরিবর্তন করা">CSS-এ একটিভ (active) লিংকের রঙ পরিবর্তন করা</p> </a> </li> <li> <a href="https://bd.wsxdn.com/ge064y/bz654t/202203/1006062341.html" class="f-start"> <span></span> <p class="r-over r-over-2" title="CSS দিয়ে ফোকাসড লিংকের রঙ পরিবর্তন করুন">CSS দিয়ে ফোকাসড লিংকের রঙ পরিবর্তন করুন</p> </a> </li> <li> <a href="https://bd.wsxdn.com/ge064y/bz654t/202203/1006062342.html" class="f-start"> <span></span> <p class="r-over r-over-2" title="CSS দিয়ে সক্রিয় লিংকের রঙ পরিবর্তন করুন">CSS দিয়ে সক্রিয় লিংকের রঙ পরিবর্তন করুন</p> </a> </li> <li> <a href="https://bd.wsxdn.com/ge064y/bz654t/202203/1006062716.html" class="f-start"> <span></span> <p class="r-over r-over-2" title="CSS দিয়ে ফর্ম ইনপুটে ব্যাকগ্রাউন্ড কালার যোগ করা">CSS দিয়ে ফর্ম ইনপুটে ব্যাকগ্রাউন্ড কালার যোগ করা</p> </a> </li> <li> <a href="https://bd.wsxdn.com/ge064y/bz654t/202203/1006062770.html" class="f-start"> <span></span> <p class="r-over r-over-2" title="CSS দিয়ে অ্যানিমেশন ডিলে করা">CSS দিয়ে অ্যানিমেশন ডিলে করা</p> </a> </li> <li> <a href="https://bd.wsxdn.com/ge064y/bz654t/202203/1006062845.html" class="f-start"> <span></span> <p class="r-over r-over-2" title="CSS দিয়ে বাটনের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করুন">CSS দিয়ে বাটনের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করুন</p> </a> </li> </ol> </section> </aside> </section> <section class="box13 content box44"> <ol class="f-between"> <li class="ibox"> <a href="https://bd.wsxdn.com/ge064y/bz654t/202203/1006063607.html" class="i-text"> <p class="r-over r-over-2">CSS দিয়ে লিস্টের বুলেট (Bullet) রঙ পরিবর্তন</p> </a> </li> <li class="ibox"> <a href="https://bd.wsxdn.com/ge064y/bz654t/202203/1006063640.html" class="i-text"> <p class="r-over r-over-2">CSS text-decoration-color দিয়ে লিংক আন্ডারলাইন রঙ পরিবর্তন করা</p> </a> </li> <li class="ibox"> <a href="https://bd.wsxdn.com/ge064y/bz654t/202203/1006063652.html" class="i-text"> <p class="r-over r-over-2">CSS ::placeholder দিয়ে টেক্সটবক্সের প্লেসহোল্ডার রঙ পরিবর্তন করা</p> </a> </li> <li class="ibox"> <a href="https://bd.wsxdn.com/ge064y/bz654t/202203/1006063664.html" class="i-text"> <p class="r-over r-over-2">CSS caret-color ব্যবহার করে কーソর রঙ পরিবর্তন করা</p> </a> </li> </ol> </section> <ul class="types box23 content f-start"> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/ca644u/' target="_self">C প্রোগ্রামিং</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/mk645f/' target="_self">C++</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/hf646z/' target="_self">Redis</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/fd647x/' target="_self">Bash প্রোগ্রামিং</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/db648w/' target="_self">Python</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/vs649n/' target="_self">Java</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/tr650l/' target="_self">তথ্যশালা</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/hf651z/' target="_self">HTML</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/mj652e/' target="_self">JavaScript</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/ki653c/' target="_self">প্রোগ্রামিং</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/bz654t/' target="_self">CSS</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/zx655s/' target="_self">Ruby</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/nl656f/' target="_self">SQL</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/sq657k/' target="_self">iOS</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/qo658j/' target="_self">Android</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/vt659n/' target="_self">MongoDB</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/us660m/' target="_self">MySQL</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/by661t/' target="_self">C#</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/mk665e/' target="_self">PHP</a></li> <li><a class='childclass' href='https://bd.wsxdn.com/ge064y/he671z/' target="_self">SQL Server</a></li> </ul> <footer> <section class="msg f-center content"> <span class="f-start"> কপিরাইট © <a href="https://bd.wsxdn.com">https://bd.wsxdn.com</a> সমস্ত অধিকার সংরক্ষিত </span> </section> </footer> </body> </html>