CSS를 사용하여 자리 표시자 색상을 변경하는 방법은 무엇입니까? (코드 예)-CSS 튜토리얼-php.cn

CSS를 사용하여 자리 표시자 색상을 변경하는 방법은 무엇입니까? (코드 예)

青灯夜游

풀어 주다： 2019-01-18 17:12:11

원래의

6341명이 탐색했습니다.

대부분의 브라우저에서 자리 표시자(입력 태그에 있음)는 회색입니다. 이 자리 표시자의 색상을 어떻게 변경합니까? 이 기사에서는 CSS를 사용하여 자리 표시자의 색상을 변경하는 방법을 설명합니다. 도움이 되기를 바랍니다.

CSS를 사용하여 자리 표시자 색상을 변경하는 방법은 무엇입니까? (코드 예)

CSS를 사용하여 자리 표시자 색상을 변경하는 방법은 무엇입니까?

CSS에서 자리표시자의 색상을 변경하려면 비표준 선택기::placeholder를 사용하여 양식 입력 상자 자리표시자의 모양을 설정하는 데 사용됩니다. 이 선택기를 통한 자리 표시자입니다. 예를 들어 색상입니다. [추천 관련 동영상 튜토리얼: CSS 튜토리얼]

브라우저마다 ::자리 표시자 선택기가 다르게 작성됩니다. 아래에서 살펴보겠습니다.

Chrome, Mozilla 및 Opera 브라우저의 경우 선택기를 다음과 같이 작성할 수 있습니다.

::placeholder

로그인 후 복사

Internet Explorer의 경우 선택기를 다음과 같이 작성해야 합니다.

:-ms-input-placeholder

로그인 후 복사

Internet Edge의 경우 선택기는 다음과 같이 작성해야 합니다.

::-ms-input-placeholder

로그인 후 복사

코드 예제

간단한 코드 예제를 통해 ::placeholder 선택기를 사용하여 자리 표시자 색상을 변경하는 방법에 대해 자세히 알아 보겠습니다.

예 1: 다른 브라우저에서 ::placeholder 선택기 사용

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS更改占位符颜色</title>
<style> 
::placeholder { /* Firefox, Chrome, Opera */ 
    color: blue; 
    font-size: 15px;
} 
  
:-ms-input-placeholder { /* Internet Explorer 10-11 */ 
    color: red; 
    font-size: 15px;
} 
  
::-ms-input-placeholder { /* Microsoft Edge */ 
    color: orange; 
    font-size: 15px;
} 
</style> 
</head>
<body>
<div class="demo">
<p>更改占位符颜色</p> 
<input type="text" placeholder="请输入....."> 
</div>
</body>
</html>

로그인 후 복사

출력:

● ::placeholder 선택기를 사용하지 않음

CSS를 사용하여 자리 표시자 색상을 변경하는 방법은 무엇입니까? (코드 예)

● Google Chrome에서

CSS를 사용하여 자리 표시자 색상을 변경하는 방법은 무엇입니까? (코드 예)

● Internet Explorer 브라우저에서

CSS를 사용하여 자리 표시자 색상을 변경하는 방법은 무엇입니까? (코드 예)

예 2: 입력 태그의 이메일 속성 및 텍스트 영역 태그에 자리 표시자 선택기 사용

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS更改占位符颜色</title>
<style> 
input[type="email"]::placeholder { /* Firefox, Chrome, Opera */ 
    color: blue; 
    font-size: 15px;
} 
textarea::placeholder { /* Firefox, Chrome, Opera */ 
    color: red; 
    font-size: 15px;
} 
</style> 
</head>
<body>
<div class="demo">
<p>更改占位符颜色</p> 
<input type="email" placeholder="请输入email...."> <br /><br />
<textarea rows="10" cols="50" placeholder="请输入email...."></textarea>
</div>
</body>
</html>

로그인 후 복사

출력:

CSS를 사용하여 자리 표시자 색상을 변경하는 방법은 무엇입니까? (코드 예)