จะเปลี่ยนสีตัวยึดตำแหน่งของอินพุต HTML5 ด้วย CSS ได้อย่างไร

HTML5 แนะนำแอตทริบิวต์ใหม่ที่เรียกว่าตัวยึดตำแหน่ง คุณลักษณะนี้ในองค์ประกอบ และ ให้คำแนะนำแก่ผู้ใช้ว่าสามารถป้อนอะไรได้บ้างในฟิลด์</P> <p style="">ต่อไปนี้คือตัวอย่างที่แสดงว่าตัวยึดตำแหน่งคืออะไร คำแนะนำในการส่งอีเมล เช่น email@example.com เป็นตัวยึดตำแหน่งที่นี่:</P> <p style=""> <img loading='lazy' alt='จะเปลี่ยนสีตัวยึดตำแหน่งของอินพุต HTML5 ด้วย CSS ได้อย่างไร ' src="/article/uploadfiles/202203/2022033115034520.jpg" /></P> <h2>ตัวอย่าง</h2> <p style="">คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อเรียนรู้วิธีใช้ <em>ตัวยึดตำแหน่ง </em> แอตทริบิวต์:</P> <p style=""></P> <pre><!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>ตัวอย่าง</h2> <p style="">หากต้องการเปลี่ยนสีตัวยึดตำแหน่งอินพุต ให้ใช้ CSS</P> <p style=""></P> <pre><!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> <br> </article> <div class="ad ad5"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4480737146802772" crossorigin="anonymous"></script><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4480737146802772" data-ad-slot="4467655591" data-ad-format="auto" data-full-width-responsive="true"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <section id="turn-page" class="t-over"> <div class="f-start f-align"> <i><img loading='lazy' src="https://th.wsxdn.com/css/img/sanjiao.svg" alt=""></i> <a class='LinkPrevArticle' href='https://th.wsxdn.com/db044w/if454a/1004062264.html' >ฉันจะจัดแท็ก <div> ให้อยู่กึ่งกลางโดยใช้ CSS ได้อย่างไร </a> </div> <div class="f-start f-align"> <i><img loading='lazy' src="https://th.wsxdn.com/css/img/sanjiao.svg" alt=""></i> <a class='LinkNextArticle' href='https://th.wsxdn.com/db044w/if454a/1004062266.html' >การใช้คุณสมบัติ CSS marker-offset </a> </div> </section> <section class="box1-3"> <ol class="f-between"> <li class="aList-2 aList f-between f-align"> <div> <a href="https://th.wsxdn.com/db044w/if454a/1004063607.html" class="title"> <p class="r-over r-over-2" title="จะเปลี่ยนสีสัญลักษณ์แสดงหัวข้อย่อยสำหรับรายการด้วย CSS ได้อย่างไร "> จะเปลี่ยนสีสัญลักษณ์แสดงหัวข้อย่อยสำหรับรายการด้วย CSS ได้อย่างไร </p> </a> </div> </li><li class="aList-2 aList f-between f-align"> <div> <a href="https://th.wsxdn.com/db044w/if454a/1004063640.html" class="title"> <p class="r-over r-over-2" title="วิธีเปลี่ยนสีขีดเส้นใต้ลิงก์โดยใช้ CSS . text-decoration-color "> วิธีเปลี่ยนสีขีดเส้นใต้ลิงก์โดยใช้ CSS . text-decoration-color </p> </a> </div> </li><li class="aList-2 aList f-between f-align"> <div> <a href="https://th.wsxdn.com/db044w/if454a/1004063652.html" class="title"> <p class="r-over r-over-2" title="วิธีการเปลี่ยนสีตัวยึดตำแหน่งสำหรับกล่องข้อความใน CSS "> วิธีการเปลี่ยนสีตัวยึดตำแหน่งสำหรับกล่องข้อความใน CSS </p> </a> </div> </li><li class="aList-2 aList f-between f-align"> <div> <a href="https://th.wsxdn.com/db044w/if454a/1004063664.html" class="title"> <p class="r-over r-over-2" title="เปลี่ยนสีเคอร์เซอร์ด้วย CSS caret-color "> เปลี่ยนสีเคอร์เซอร์ด้วย CSS caret-color </p> </a> </div> </li> </ol> </section> </section> <aside class="box-r"> <section class="box4-1"> <strong> CSS </strong> <ol> <li class="f-start"> <i> <img loading='lazy' src="https://th.wsxdn.com/css/img/article-lan.svg" alt=""> </i> <a href="https://th.wsxdn.com/db044w/ec452w/1004056665.html" title="เปลี่ยนสีของ Active Links ด้วย CSS "> <p class="r-over r-over-2">เปลี่ยนสีของ Active Links ด้วย CSS </p> </a> </li> <li class="f-start"> <i> <img loading='lazy' src="https://th.wsxdn.com/css/img/article-lan.svg" alt=""> </i> <a href="https://th.wsxdn.com/db044w/if454a/1004062341.html" title="วิธีเปลี่ยนสีของลิงค์ที่โฟกัสด้วย CSS "> <p class="r-over r-over-2">วิธีเปลี่ยนสีของลิงค์ที่โฟกัสด้วย CSS </p> </a> </li> <li class="f-start"> <i> <img loading='lazy' src="https://th.wsxdn.com/css/img/article-lan.svg" alt=""> </i> <a href="https://th.wsxdn.com/db044w/if454a/1004062342.html" title="วิธีเปลี่ยนสีของลิงค์ที่ใช้งานด้วย CSS "> <p class="r-over r-over-2">วิธีเปลี่ยนสีของลิงค์ที่ใช้งานด้วย CSS </p> </a> </li> <li class="f-start"> <i> <img loading='lazy' src="https://th.wsxdn.com/css/img/article-lan.svg" alt=""> </i> <a href="https://th.wsxdn.com/db044w/if454a/1004062716.html" title="เพิ่มสีพื้นหลังให้กับอินพุตแบบฟอร์มด้วย CSS "> <p class="r-over r-over-2">เพิ่มสีพื้นหลังให้กับอินพุตแบบฟอร์มด้วย CSS </p> </a> </li> <li class="f-start"> <i> <img loading='lazy' src="https://th.wsxdn.com/css/img/article-lan.svg" alt=""> </i> <a href="https://th.wsxdn.com/db044w/if454a/1004062770.html" title="วิธีหน่วงเวลาแอนิเมชั่นด้วย CSS "> <p class="r-over r-over-2">วิธีหน่วงเวลาแอนิเมชั่นด้วย CSS </p> </a> </li> </ol> </section> <ul> <li class="f-start f-align"> <a href="https://th.wsxdn.com/db044w/if454a/1004063481.html" class="i-text"><p class="r-over r-over-3">จะล้างฟิลด์อินพุตที่โฟกัสด้วย CSS ได้อย่างไร </p></a> </li> <li class="f-start f-align"> <a href="https://th.wsxdn.com/db044w/if454a/1004063516.html" class="i-text"><p class="r-over r-over-3">จะสร้างการ์ดด้วย CSS ได้อย่างไร? </p></a> </li> <li class="f-start f-align"> <a href="https://th.wsxdn.com/db044w/if454a/1004063526.html" class="i-text"><p class="r-over r-over-3">จะสร้างคูปองด้วย CSS ได้อย่างไร? </p></a> </li> <li class="f-start f-align"> <a href="https://th.wsxdn.com/db044w/if454a/1004063532.html" class="i-text"><p class="r-over r-over-3">จะสร้างสีพื้นหลังไล่ระดับบนเลื่อนด้วย CSS ได้อย่างไร? </p></a> </li> <li class="f-start f-align"> <a href="https://th.wsxdn.com/db044w/if454a/1004063550.html" class="i-text"><p class="r-over r-over-3">จะเปลี่ยนสีของแอตทริบิวต์ตัวยึดตำแหน่งด้วย CSS ได้อย่างไร </p></a> </li> </ul> <ul class="types f-between"> <li><a class='childclass' href='https://th.wsxdn.com/db044w/hf444z/' target="_self">การเขียนโปรแกรม C</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/bz445u/' target="_self">C++</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/tr446l/' target="_self">Redis</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/rp447j/' target="_self">การเขียนโปรแกรม BASH</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/wu448o/' target="_self">Python</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/nl449f/' target="_self">Java</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/ig450a/' target="_self">ฐานข้อมูล</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/zx451s/' target="_self">HTML</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/ec452w/' target="_self">Javascript</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/db453v/' target="_self">การเขียนโปรแกรม</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/if454a/' target="_self">CSS</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/ge455y/' target="_self">Ruby</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/xv456p/' target="_self">SQL</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/jh457b/' target="_self">IOS</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/om458g/' target="_self">Android</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/mk459f/' target="_self">MongoDB</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/rp460j/' target="_self">MySQL</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/qn461i/' target="_self">C#</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/jh465b/' target="_self">PHP</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/kh471c/' target="_self">SQL Server</a></li> </ul> </aside> </section> <footer> <section class="msg f-center container"> <span class="f-start"> ลิขสิทธิ์ © <a href="https://th.wsxdn.com">https://th.wsxdn.com</a> สงวนลิขสิทธิ์ </span> </section> </footer> </body> </html>