자리 표시자 속성을 사용하는 방법과 자리 표시자의 기본 스타일을 수정하는 방법에 대한 자세한 그래픽 설명

입력 상자는 페이지 레이아웃 중에 자주 사용됩니다. 때로는 사용자에게 올바른 정보를 입력하라는 메시지를 표시하기 위해 자리 표시자 속성을 사용하여 설명해야 합니다. 이 글은 placeholder 속성을 사용하는 방법과 placeholder 속성의 스타일을 수정하는 방법에 대해 설명합니다. 관심 있는 친구들이 참고하시면 도움이 될 것입니다.

placeholder는 HTML5의 새로운 속성입니다. 자리 표시자는 간단한 메시지의 입력 필드 예상 값을 설명하는 데 사용할 수 있습니다. 사용자가 값을 입력하기 전에 프롬프트가 표시되고 사용자가 값을 입력하면 사라집니다. 예를 들어 로그인할 때 사용자 이름과 비밀번호를 입력해야 합니다. 사용자 이름을 입력할 위치와 비밀번호를 입력할 위치를 묻는 메시지가 표시됩니다.

참고: 자리 표시자 속성은 텍스트, 검색, URL, 전화번호, 이메일, 비밀번호 등의 입력 유형에 적용됩니다.

1. 자리 표시자 속성을 사용하는 방법

구문: placeholder="메시지를 표시할 내용"

다음과 같이 프롬프트가 표시되어야 하는 입력 입력 상자에 자리 표시자 속성을 직접 추가할 수 있습니다. input type="text " name="name" placeholder="사용자를 입력하세요">

<input type="text" id="input" placeholder="请输入用户名" />

Rendering:

그림과 같이 입력 입력 상자에는 사용자 이름을 입력하라는 메시지가 표시됩니다

2. 자리 표시자 속성 수정

자리 표시자 속성의 기본 색상, 스타일 등이 요구 사항을 충족할 수 없는 경우 해당 스타일을 수정해야 합니다.

작성: input::-webkit-input-placeholder{수정하려는 스타일}

placeholder는 HTML5에 새로 추가된 속성이므로 브라우저 호환성에 주의해야 합니다.

::-webkit-input-placeholder{} /* 웹킷 커널을 사용하는 브라우저*/

:-moz-placeholder{} /* Firefox 버전 4-18 */

::-moz-placeholder{} /* Firefox 버전 19+ */

:-ms-input-placeholder{} /* IE 브라우저*/

예: 자리 표시자 스타일을 수정하고, 입력 프롬프트 상자의 텍스트 색상을 빨간색으로 설정하고, 글꼴을 설정합니다. 20px 로 설정하면 텍스트가 입력 상자의 중앙에 가로로 표시됩니다. 코드는 다음과 같습니다

HTML 부분:

<input type="text" id="input" placeholder="请输入用户名" />

CSS 부분:

input{width: 200px;height: 40px;}
#input::-webkit-input-placeholder {
	 color: red;
	 font-size: 20px;
	 text-align: center;
	}
#input:-moz-placeholder {
	color: red;
	font-size: 20px;
	text-align: center;
	}
#input:-ms-input-placeholder {
	color: red;
	font-size: 20px;
	text-align: center;
	}

Rendering:

요약: 위에서 placeholder 속성을 사용하는 방법과 placeholder 스타일을 수정하는 방법을 소개합니다. 간단하지만 브라우저 호환성에 주의를 기울여야 합니다. 이전에 플레이스홀더를 사용해 본 적이 없으신 분들은 직접 사용해 보시고 도움이 되셨으면 좋겠습니다!

위 내용은 자리 표시자 속성을 사용하는 방법과 자리 표시자의 기본 스타일을 수정하는 방법에 대한 자세한 그래픽 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!