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

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

青灯夜游
青灯夜游원래의
2019-01-18 17:11:246333검색

대부분의 브라우저에서 자리 표시자(입력 태그에 있음)는 회색입니다. 이 자리 표시자의 색상을 어떻게 변경합니까? 이 기사에서는 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를 사용하여 자리 표시자 색상을 변경하는 방법은 무엇입니까? (코드 예)

설명:

자리 표시자 선택기는 입력의 모든 속성에 적용할 수 있습니다. 태그(문자, 전화, 비밀번호 등)를 사용하여 다양한 속성에 대한 색상 변경을 강조합니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 관련 튜토리얼 열을 주의 깊게 살펴보세요! ! !

위 내용은 CSS를 사용하여 자리 표시자 색상을 변경하는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.