CSS로 HTML5 입력 자리 표시자 색상 변경
Jay Singh
2023년2월20일
웹사이트나 웹 페이지를 군중에서 돋보이게 만들고 싶다면 HTML 코드만으로는 잘 되지 않습니다. CSS 속성으로 스타일을 지정해야 합니다.
CSS에서 다양한 속성과 선택기를 사용하여 HTML5 구성 요소의 스타일을 지정하고 더 사용자 친화적으로 만들 수 있습니다. HTML5에서 다양한 CSS 선택기는 텍스트 색상, 글꼴, 글꼴 크기, 텍스트 정렬 및 기타 여러 사항을 변경합니다.
HTML5에서 placeholder 속성은 예제를 표시하여 올바른 구문을 통해 사용자를 안내합니다. 사용자가 값을 입력하기 전에 브라우저는 형식을 나타냅니다.
이것은 사용자가 이름, 나이, 전화번호 등과 같은 정보를 제출할 수 있도록 하는 HTML의 입력 요소와 함께 가장 일반적으로 사용됩니다. 이 기사에서는 CSS를 사용하여 HTML5 입력의 자리 표시자 색상을 변경하는 방법을 설명합니다.
CSS로 HTML5 입력 자리 표시자 색상 변경
이 예에서 :: placeholder 선택기는 Style CSS에서 자리 표시자 텍스트의 색상을 주황색으로 변경하는 데 사용됩니다. <input> 태그를 사용하여 텍스트를 입력했습니다.
문자만 받습니다. placeholder 속성도 사용자 편의를 위해 활용됩니다.
예 1:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Placeholder Color</title>
<style>
::placeholder{/* syntax for Chrome,Firefox,Mozilla browsers*/
color:orange;
}
</style>
</head>
<body>
<p>Please enter your name</p>
<input type="text" placeholder="Text only">
</body>
</html>
아래 예제에서는 <form> 요소를 사용하여 HTML 양식을 만드는 것으로 시작했습니다. ::placeholder 선택기를 사용하여 양식의 <input> 구성 요소 세 개 모두에 대해 자리 표시자 텍스트의 색상이 수정됩니다.
예 2:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Placeholder2</title>
</head>
<style>
::placeholder{
color: green;
}
</style>
<body>
<h2> Please fill the form</h2>
<form>
<input type="text" placeholder="Enter your name"><br>
<input type="number" placeholder="Enter your age"><br>
<input type="email" placeholder="Enter your email-id">
</form>
</body>
</html>