目次
プレースホルダーの色を変える方法
以下のようにCSSを定義する事でプレースホルダーの色を変える事ができます。
::placeholder {
color: orange;
}
以下がHTMLのサンプルです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
::placeholder {
color: orange;
}
</style>
</head>
<body>
<input type="text" placeholder="サンプル">
</body>
</html>
特定のテキストフィールドのプレースホルダーの文字色を変更する方法
以下のように「::placeholder」の前にセレクタを記載する事で該当のセレクタのプレースホルダーのみ色を変更する事ができます。
#hoge::placeholder {
color: orange;
}
以下がHTMLのサンプルです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#hoge::placeholder {
color: orange;
}
</style>
</head>
<body>
<input type="text" id="hoge" placeholder="サンプル">
<input type="text" placeholder="サンプル1">
</body>
</html>
