CSS로 HTML5 입력의 자리 표시자 색상을 변경하는 방법은 무엇입니까?

<시간/>

HTML5는 자리 표시자라는 새로운 속성을 도입했습니다. 및 요소의 이 속성은 사용자에게 필드에 입력할 수 있는 내용에 대한 힌트를 제공합니다.</P> <p style="">다음은 자리 표시자가 무엇인지 보여주는 예입니다. 이메일 힌트(예:email@example.com)는 다음 위치에 있습니다.</P> <p 스타일=""> <img loading='lazy' alt='CSS로 HTML5 입력의 자리 표시자 색상을 변경하는 방법은 무엇입니까? ' src="/article/uploadfiles/202203/2022033115034520.jpg" /></P> <h2>예시</h2> <p style="">다음 코드를 실행하여 <em>자리 표시자 </em> 사용 방법을 배울 수 있습니다. 속성:</P> <p 스타일=""></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 스타일=""></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="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> <div id="turn-page" class="text-over"> <a class='LinkPrevArticle' href='https://kr.wsxdn.com/bz024t/vs254n/1002062264.html' >CSS를 사용하여 <div> 태그를 중앙에 어떻게 배치합니까? </a> <a class='LinkNextArticle' href='https://kr.wsxdn.com/bz024t/vs254n/1002062266.html' >CSS marker-offset 속성 사용 </a> </div> </section> <aside class="box-r box4-r"> <h3>CSS</h3> <ul> <li> <a href="https://kr.wsxdn.com/bz024t/ig252a/1002056665.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="CSS로 활성 링크의 색상 변경 ">CSS로 활성 링크의 색상 변경 </p> </a> </li><li> <a href="https://kr.wsxdn.com/bz024t/vs254n/1002062341.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="CSS로 초점이 맞춰진 링크의 색상을 변경하는 방법 ">CSS로 초점이 맞춰진 링크의 색상을 변경하는 방법 </p> </a> </li><li> <a href="https://kr.wsxdn.com/bz024t/vs254n/1002062342.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="CSS로 활성 링크의 색상을 변경하는 방법 ">CSS로 활성 링크의 색상을 변경하는 방법 </p> </a> </li><li> <a href="https://kr.wsxdn.com/bz024t/vs254n/1002062716.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="CSS를 사용하여 양식 입력에 배경색 추가 ">CSS를 사용하여 양식 입력에 배경색 추가 </p> </a> </li><li> <a href="https://kr.wsxdn.com/bz024t/vs254n/1002062770.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="CSS로 애니메이션을 지연시키는 방법 ">CSS로 애니메이션을 지연시키는 방법 </p> </a> </li> </ul> <h3 class="h3-2">컴퓨터</h3> <ul> <li> <a href="https://kr.wsxdn.com/bz024t/qo253i/1002038871.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML/CSS에서 배경색을 변경하는 방법 ">HTML/CSS에서 배경색을 변경하는 방법 </p> </a> </li> <li> <a href="https://kr.wsxdn.com/bz024t/vs254n/1002054609.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="CSS로 그라데이션 배경색을 설정하는 방법 ">CSS로 그라데이션 배경색을 설정하는 방법 </p> </a> </li> <li> <a href="https://kr.wsxdn.com/bz024t/vs254n/1002054616.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="CSS로 입력 자리 표시자 텍스트의 스타일을 지정하는 방법 ">CSS로 입력 자리 표시자 텍스트의 스타일을 지정하는 방법 </p> </a> </li> <li> <a href="https://kr.wsxdn.com/bz024t/vs254n/1002054617.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="CSS로 텍스트 그라디언트 색상을 추가하는 방법 ">CSS로 텍스트 그라디언트 색상을 추가하는 방법 </p> </a> </li> <li> <a href="https://kr.wsxdn.com/bz024t/vs254n/1002062845.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="CSS로 버튼의 배경색 변경 ">CSS로 버튼의 배경색 변경 </p> </a> </li> </ul> </aside> </section> </div> <ul class="types box4-1 container f-center"> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/ol244g/' target="_self">C 프로그래밍</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/fd245y/' target="_self">C++</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/xv246p/' target="_self">Redis</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/ig247a/' target="_self">BASH 프로그래밍</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/ge248y/' target="_self">Python</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/jh249b/' target="_self">Java</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/yw250q/' target="_self">데이터 베이스</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/hf251z/' target="_self">HTML</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/ig252a/' target="_self">JavaScript</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/qo253i/' target="_self">프로그램 작성</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/vs254n/' target="_self">CSS</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/fd255x/' target="_self">Ruby</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/ay256s/' target="_self">SQL</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/yw257q/' target="_self">IOS</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/wu258o/' target="_self">Android</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/nl259f/' target="_self">MongoDB</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/mk260e/' target="_self">MySQL</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/ax261s/' target="_self">C＃</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/bz265t/' target="_self">PHP</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/zx271r/' target="_self">SQL Server</a></li> </ul> <footer> <section class="container"> <div class="footer-msg"> <span class="container f-center"> <p class=krf>저작권 © <a href="https://kr.wsxdn.com">https://kr.wsxdn.com</a> 모든 권리 보유</p> </span> </div> </section> </footer> </body> </html>