Computer >> Máy Tính >  >> Lập trình >> CSS

Làm cách nào để thay đổi màu trình giữ chỗ của đầu vào HTML5 bằng CSS?

HTML5 đã giới thiệu một thuộc tính mới được gọi là trình giữ chỗ. Thuộc tính này trên các phần tử

Đây là một ví dụ cho thấy trình giữ chỗ là gì. Gợi ý gửi email, tức là email@example.com là trình giữ chỗ ở đây:

Làm cách nào để thay đổi màu trình giữ chỗ của đầu vào HTML5 bằng CSS?

Ví dụ

Bạn có thể thử chạy mã sau để tìm hiểu cách sử dụng trình giữ chỗ thuộc tính:

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

Ví dụ

Để thay đổi màu trình giữ chỗ đầu vào, hãy sử dụng CSS.

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