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

Sử dụng CSS:trình giữ chỗ được hiển thị để Tùy chỉnh kiểu cho đầu vào văn bản trống

Để tùy chỉnh kiểu cho hộp văn bản đầu vào có trình giữ chỗ, chúng tôi sử dụng:lớp giả do trình giữ chỗ hiển thị của CSS.

Ví dụ

Các ví dụ sau minh họa CSS:lớp giả hiển thị trình giữ chỗ.

<!DOCTYPE html>
<html>
<head>
<style>
input:placeholder-shown {
   border-color: dodgerblue;
}
input:nth-of-type(even):placeholder-shown {
   border-color: olivedrab;
}
</style>
</head>
<body>
<input type="text" placeholder="dodgerblue">
<input type="email" placeholder="olivedrab">
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Sử dụng CSS:trình giữ chỗ được hiển thị để Tùy chỉnh kiểu cho đầu vào văn bản trống

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
input:placeholder-shown {
   border-color: orange;
   background: powderblue;
}
</style>
</head>
<body>
<input type="radio" checked>
<input type="email" placeholder="orange">
<input type="text">
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Sử dụng CSS:trình giữ chỗ được hiển thị để Tùy chỉnh kiểu cho đầu vào văn bản trống