1. 程式人生 > >改變輸入框游標顏色

改變輸入框游標顏色

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>改變輸入框游標顏色</title>
	<style>
		input {
		    color: #333;
		    caret-color: red;
		}
	</style>
</head>
<body>
	<!-- Safari以及IE瀏覽器有相容問題 -->
	<input value="改變輸入框游標顏色">
</body>
</html>
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>改變輸入框游標顏色</title>
	<style>
		.input {
		    color: red;
		}
		.input::first-line {
		    color: #333;
		}
	</style>
</head>
<body>
	<!-- Safari以及IE瀏覽器有相容問題 -->
	<input value="改變輸入框游標顏色" class="input" />
</body>
</html>
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>最終版--改變輸入框游標顏色</title>
	<style>
		.center {
		    color: #333;
		    caret-color: red;
		}
		@supports (-webkit-mask: none) and (not (caret-color: red)) {
		    .center { color: red; }
		    .center::first-line { color: #333; }
		}
	</style>
</head>
<body>
	<input value="混合相容處理" class="center" />
</body>
</html>

在這裡插入圖片描述