CSS로 자리표시자의 색상을 수정하는 방법-CSS 튜토리얼-php.cn

CSS로 자리표시자의 색상을 수정하는 방법

醉折花枝作酒筹

풀어 주다： 2023-01-05 16:07:57

원래의

34529명이 탐색했습니다.

방법: 먼저 "::placeholder" 선택기를 사용하여 수정해야 하는 요소를 선택한 다음 "color:color value;" 스타일을 요소에 추가합니다. 자리 표시자는 CSS3의 새로운 선택기이며 브라우저마다 다른 접두사("-ms-", "-webkit-" 등)가 필요합니다.

CSS로 자리표시자의 색상을 수정하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

placeholder 속성은 입력 필드의 예상 값에 대한 프롬프트 정보를 설명하는 데 사용됩니다.

placeholder의 색상을 수정하는 방법은 무엇입니까?

그러나 특정 브라우저 호환성 문제가 있습니다. chorme를 예로 들어 보겠습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
    
    input::-webkit-input-placeholder {
        color: #aab2bd;
        font-size: 12px;
    }
    input {//边框效果
        border: 1px solid red;
    }
    </style>
</head>
<body>
    
    <input type="text" placeholder="请输入">
    
</body>
</html>

로그인 후 복사

Chrome 브라우저에 해당하는 선택기는 input::-webkit-input-placeholder

효과는 다음과 같습니다.

다른 브라우저에 대한 선택기는 다음과 같습니다.

input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color : red;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color : red;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color : red;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color : red;
}
input::-ms-input-placeholder { /* Microsoft Edge */
   color : red;
}

로그인 후 복사

WebKit, Blink, Edge 브라우저 , 등에는 -webkit- 접두사가 있어야 하며 이중 콜론이므로 작성 시 입력도 포함해야 합니다
Firefox의 경우 작성하는 방법이 두 가지가 있는데 둘 다 접두사 -moz-를 붙여야 합니다. . 낮은 버전의 Firefox에서는 콜론(:)을 사용하고, 높은 버전에서는 이중 콜론(::)을 사용합니다.
자리 표시자 속성은 IE10+에서만 지원됩니다. IE10 및 IE11은 -ms- 접두사와 콜론(:)으로 작성됩니다. 입력을 가져와야 합니다.

권장 학습: css 비디오 튜토리얼

위 내용은 CSS로 자리표시자의 색상을 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!