CSSでHTML5入力のプレースホルダーの色を変更するにはどうすればよいですか？

HTML5では、プレースホルダーと呼ばれる新しい属性が導入されました。要素と要素のこの属性は、フィールドに入力できる内容のヒントをユーザーに提供します。</P> <pstyle="">プレースホルダーとは何かを示す例を次に示します。メールのヒント、つまりemail@example.comは、ここのプレースホルダーです：</P> <p style =""> <img loading='lazy' alt='CSSでHTML5入力のプレースホルダーの色を変更するにはどうすればよいですか？ ' 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> </div> <div class="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="2397329591" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> adsbygoogle = window.adsbygoogle || [].push{}; </script></div> <div id="turn-page" class="f-between"> <div class="page up f-align"> <i class="prev"></i> <a class='LinkPrevArticle' href='https://jp.wsxdn.com/pn014i/if154a/1001062264.html' >CSSを使用して<div>タグを中央に配置するにはどうすればよいですか？ </a> </div> <div class="page down f-align"> <a class='LinkNextArticle' href='https://jp.wsxdn.com/pn014i/if154a/1001062266.html' >CSSマーカーオフセットプロパティの使用 </a> <i class="next"></i> </div> </div> <section class="bottom-list"> <ol> <li class="f-between"> <div> <a href="https://jp.wsxdn.com/pn014i/if154a/1001063652.html" class="t-over" title="CSSでテキストボックスのプレースホルダーの色を変更する方法 "> <span>CSSでテキストボックスのプレースホルダーの色を変更する方法 </span> </a> <p class="r-over r-over-3"> ::placeholder疑似要素を使用して、テキストボックスのプレースホルダーテキストの色を変更できます。 CSS::placeholder疑似要素の構文は次のとおりです- ::placeholder { attribute: /*value*/ } 例次の例は、CSS::プレースホルダー疑似要素を示しています。 <!DOCTYPE html> <html> <head> <style> input:last-child::placeholder { color: cornflowerblue; } < </p> </div> </li> <li class="f-between"> <div> <a href="https://jp.wsxdn.com/pn014i/if154a/1001063664.html" class="t-over" title="CSScaret-colorでカーソルの色を変更する "> <span>CSScaret-colorでカーソルの色を変更する </span> </a> <p class="r-over r-over-3"> 挿入カレットの色を変更するには、CSScaret-colorプロパティ使用されます。例次の例は、CSSのcaret-colorプロパティを示しています。 <!DOCTYPE html> <html> <head> <style> form { padding: 2%; margin: 2%; text-align: center; } form:focus-within { box-shadow: 0 0 10px rgba(0,0,0 </p> </div> </li> </ol> </section> </article> <aside class="box1-r box4-r"> <section class="small-nav"> <ul class="f-between"> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/gd144y/' target="_self">Cプログラミング</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/qo145i/' target="_self">C ++</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/jh146b/' target="_self">Redis</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/hf147z/' target="_self">BASHプログラミング</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/mk148e/' target="_self">Python</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/lj149d/' target="_self">Java</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/ay150s/' target="_self">データベース</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/ay151t/' target="_self">HTML</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/pn152h/' target="_self">Javascript</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/jh153b/' target="_self">プログラミング</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/if154a/' target="_self">CSS</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/ig155a/' target="_self">Ruby</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/jg156b/' target="_self">SQL</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/ig157b/' target="_self">IOS</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/wu158p/' target="_self">Android</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/ge159z/' target="_self">MongoDB</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/jh160b/' target="_self">MySQL</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/ec161w/' target="_self">C＃</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/gd165y/' target="_self">PHP</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/ig171a/' target="_self">SQL Server</a></li> </ul> </section> <div class="box1-r-list"> <div> <i></i> <span>CSS</span> </div> <ol> <li class="f-start"> <em></em> <a href="https://jp.wsxdn.com/pn014i/jh153b/1001038871.html" class="r-over r-over-2" title="HTML/CSSで背景色を変更する方法 ">HTML/CSSで背景色を変更する方法 </a> </li> <li class="f-start"> <em></em> <a href="https://jp.wsxdn.com/pn014i/if154a/1001054609.html" class="r-over r-over-2" title="CSSでグラデーションの背景色を設定する方法 ">CSSでグラデーションの背景色を設定する方法 </a> </li> <li class="f-start"> <em></em> <a href="https://jp.wsxdn.com/pn014i/if154a/1001054616.html" class="r-over r-over-2" title="CSSを使用して入力プレースホルダーテキストのスタイルを設定する方法 ">CSSを使用して入力プレースホルダーテキストのスタイルを設定する方法 </a> </li> <li class="f-start"> <em></em> <a href="https://jp.wsxdn.com/pn014i/if154a/1001054617.html" class="r-over r-over-2" title="CSSを使用してテキストのグラデーションカラーを追加する方法 ">CSSを使用してテキストのグラデーションカラーを追加する方法 </a> </li> <li class="f-start"> <em></em> <a href="https://jp.wsxdn.com/pn014i/pn152h/1001056665.html" class="r-over r-over-2" title="CSSでアクティブリンクの色を変更する ">CSSでアクティブリンクの色を変更する </a> </li> <li class="f-start"> <em></em> <a href="https://jp.wsxdn.com/pn014i/if154a/1001062341.html" class="r-over r-over-2" title="CSSでフォーカスされたリンクの色を変更する方法 ">CSSでフォーカスされたリンクの色を変更する方法 </a> </li> <li class="f-start"> <em></em> <a href="https://jp.wsxdn.com/pn014i/if154a/1001062342.html" class="r-over r-over-2" title="CSSでアクティブなリンクの色を変更する方法 ">CSSでアクティブなリンクの色を変更する方法 </a> </li> <li class="f-start"> <em></em> <a href="https://jp.wsxdn.com/pn014i/if154a/1001062716.html" class="r-over r-over-2" title="CSSを使用してフォーム入力に背景色を追加します ">CSSを使用してフォーム入力に背景色を追加します </a> </li> <li class="f-start"> <em></em> <a href="https://jp.wsxdn.com/pn014i/if154a/1001062770.html" class="r-over r-over-2" title="CSSでアニメーションを遅らせる方法 ">CSSでアニメーションを遅らせる方法 </a> </li> <li class="f-start"> <em></em> <a href="https://jp.wsxdn.com/pn014i/if154a/1001062845.html" class="r-over r-over-2" title="CSSでボタンの背景色を変更する ">CSSでボタンの背景色を変更する </a> </li> </ol> </div> </aside> </section> <footer> <section> <span class="container f-center"> 著作権 © <a href="https://jp.wsxdn.com">https://jp.wsxdn.com</a> 全著作権所有 </span> </section> </footer> </body> </html>