CSS를 사용하여 HTML5 입력의 자리 표시 자 색상 변경

Chrome은 요소 에 대한 자리 표시 자 속성 을 지원합니다 input[type=text](다른 것 역시 가능).

그러나 다음 CSS은 자리 표시 자의 가치에 아무런 영향을 미치지 않습니다.

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}

<input type="text" placeholder="Value">

Valuegrey대신에 계속 남아 있습니다 red.

자리 표시 자 텍스트의 색상을 변경하는 방법이 있습니까?

이행

의사 요소, 의사 클래스 및 아무것도 아닌 세 가지 구현이 있습니다.

• WebKit, Blink (Safari, Google Chrome, Opera 15+) 및 Microsoft Edge는 의사 요소 ()를 사용하고 ::-webkit-input-placeholder있습니다. ^{[ 참조 ]}
• Mozilla Firefox 4-18은 의사 클래스 :-moz-placeholder( 하나의 콜론)를 사용합니다. ^{[ 참조 ]}
• Mozilla Firefox 19 이상에서는 의사 요소 :를 사용 ::-moz-placeholder하고 있지만 이전 선택기는 여전히 한동안 작동합니다. ^{[ 참조 ]}
• Internet Explorer 10 및 11은 의사 클래스를 사용하고 :-ms-input-placeholder있습니다. ^{[ 참조 ]}
• 2017 년 4 월 : 대부분의 최신 브라우저는 간단한 의사 요소를 지원합니다 ::placeholder ^{[ Ref ]}

Internet Explorer 9 이하는 placeholder속성을 전혀 지원하지 않지만 Opera 12 이하는 자리 표시 자에 대한 CSS 선택기를 지원하지 않습니다 .

최상의 구현에 대한 논의는 여전히 진행 중입니다. 의사 요소는 Shadow DOM 에서 실제 요소처럼 작동 합니다 . padding온은 input의사 요소와 동일한 배경 색상을받지 않습니다.

CSS 선택기

사용자 에이전트는 알 수없는 선택기가있는 규칙을 무시해야합니다. 선택기 레벨 3 참조 :

그룹 잘못된 선택을 포함하는 선택기가 잘못되었습니다.

따라서 각 브라우저마다 별도의 규칙이 필요합니다. 그렇지 않으면 모든 브라우저에서 전체 그룹을 무시합니다.

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

::placeholder { /* Most modern browsers support this now. */
   color:    #909;
}

<input placeholder="Stack Snippets are awesome!">

사용법 메모

• 나쁜 대조를 피하도록주의하십시오. Firefox의 자리 표시자는 기본적으로 불투명도가 감소한 것으로 보이므로 opacity: 1여기서 사용해야 합니다.
• 자리 표시 자 텍스트는 입력 요소의 크기가 맞지 않으면 잘립니다 em. 최소 글꼴 크기 설정으로 테스트하십시오. 번역을 잊지 마십시오 : 일부 언어 는 같은 단어를위한 더 많은 공간이 필요합니다.
• HTML을 지원 placeholder하지만 CSS를 지원하지 않는 브라우저 (예 : Opera)도 테스트해야합니다.
• 일부 브라우저는 일부 input유형 ( email, search)에 추가 기본 CSS를 사용 합니다. 예기치 않은 방식으로 렌더링에 영향을 줄 수 있습니다. 사용 등록을 -webkit-appearance 하고 -moz-appearance그것을 변경할 수 있습니다. 예:

    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

/* do not group these rules */
*::-webkit-input-placeholder {
    color: red;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: red;
    opacity: 1;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: red;
    opacity: 1;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: red;
}
*::-ms-input-placeholder {
    /* Microsoft Edge */
    color: red;
}
*::placeholder {
    /* modern browser */
    color: red;
}

<input placeholder="hello"/> <br />
<textarea placeholder="hello"></textarea>

모든 자리 표시 자 input와 스타일을 지정합니다 textarea.

중요 참고 사항 : 이 규칙을 그룹화하지 마십시오. 대신, 모든 선택기에 대해 별도의 규칙을 작성하십시오 (그룹에서 하나의 유효하지 않은 선택기가 전체 그룹을 유효하지 않게합니다).

텍스트 영역의 스타일을 지정할 수도 있습니다.

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #636363;
}

들어 부트 스트랩 및 적은 사용자를하는 믹스 인의 .placeholder이있다 :

// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
  &:-moz-placeholder {
    color: @color;
  }
  &:-ms-input-placeholder {
    color: @color;
  }
  &::-webkit-input-placeholder {
    color: @color;
  }
}

toscho의 답변 외에도 Chrome 9-10과 Safari 5 간의 웹킷 불일치가 주목할만한 CSS 속성이 지원되는 것으로 나타났습니다.

특히 크롬 9와 10은 지원하지 않습니다 background-color, border, text-decoration및 text-transform개체 틀을 스타일링 할 때.

전체 브라우저 간 비교는 여기에 있습니다 .

대한 말대꾸의 사용자 :

// Create placeholder mixin
@mixin placeholder($color, $size:"") {
  &::-webkit-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &::-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-ms-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
}

// Use placeholder mixin (the size parameter is optional)
[placeholder] {
  @include placeholder(red, 10px);
}

이것은 잘 작동합니다. 여기 데모 :

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #666;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #666;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #666;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #666;
}

<input type="text" placeholder="Value" />

Firefox 및 Internet Explorer에서 일반 입력 텍스트 색상은 자리 표시 자의 색상 속성보다 우선합니다. 그래서 우리는

::-webkit-input-placeholder { 
    color: red; text-overflow: ellipsis; 
}
:-moz-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
}
::-moz-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
} /* For the future */
:-ms-input-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
}

크로스 브라우저 솔루션 :

/* all elements */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* individual elements: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual elements: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

크레딧 : David Walsh

autoprefixer를 사용하는 ::placeholder경우 새로운 기능 을 사용 하십시오 .

Bootstrap 의 .placeholder 믹스 인 은 더 이상 사용되지 않습니다.

예:

input::placeholder { color: black; }

자동 접두사를 사용할 때 위의 내용은 모든 브라우저에서 올바른 코드로 변환됩니다.

이제 입력의 자리 표시 자에 CSS를 적용하는 표준 방법이 있습니다. ::placeholder 에서 의사 요소 이 CSS 모듈 레벨 4 초안.

브라우저가 자리 표시 자에 불투명도 값을 제공한다는 사실을 Mozilla Firefox 19 이상에서 알기 때문에 실제로 원하는 색상이 아닙니다.

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #eee; opacity:1;
}
input:-moz-placeholder, textarea:-moz-placeholder {
    color: #eee; opacity:1;
}
input::-moz-placeholder, textarea::-moz-placeholder {
    color: #eee; opacity:1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #eee; opacity:1;
}

나는 1을 덮어 썼 opacity으므로 갈 것입니다.

인터넷 에서이 코드 스 니펫을 어디서 발견했는지 기억하지 못합니다 (내가 작성하지 않았으며 어디서 찾았는지 또는 누가 기록했는지 기억하지 못합니다).

$('[placeholder]').focus(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function() {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur();
    $('[placeholder]').parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        })
    });

이 JavaScript 코드를로드 한 다음이 규칙을 호출하여 CSS로 자리 표시자를 편집하십시오.

form .placeholder {
   color: #222;
   font-size: 25px;
   /* etc. */
}

자리 표시자가 입력 유형 텍스트에만 필요하기 때문에이 코드가 작동한다고 생각합니다. 따라서이 한 줄의 CSS로 충분합니다.

input[type="text"]::-webkit-input-placeholder {
    color: red;
}

들어 부트 스트랩 을 사용하는 경우에는 사용자, class="form-control"하는 CSS 특이성 문제가있을 수 있습니다. 우선 순위가 더 높아야합니다.

.form-control::-webkit-input-placeholder {
    color: red;
}
//.. and other browsers

또는 Less 를 사용하는 경우 :

.form-control{
    .placeholder(red);
}

부트 스트랩을 사용하는 경우 작업을 수행 할 수 없다면 Bootstrap 자체가 이러한 선택기를 추가한다는 사실을 놓쳤을 것입니다. 이것이 우리가 이야기하는 부트 스트랩 v3.3입니다.

.form-control CSS 클래스 에서 자리 표시자를 변경하려는 경우 다음과 같이 재정의해야합니다.

.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #777;
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #777;
    opacity:  1;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #777;
    opacity:  1;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #777;
}

이 짧고 깨끗한 코드 :

::-webkit-input-placeholder {color: red;}
:-moz-placeholder           {color: red; /* For Firefox 18- */}
::-moz-placeholder          {color: red; /* For Firefox 19+ */}
:-ms-input-placeholder      {color: red;}

이건 어때요

<input type="text" value="placeholder text" onfocus="this.style.color='#000'; 
    this.value='';" style="color: #f00;" />

CSS 나 자리 표시자는 없지만 기능은 동일합니다.

모바일 플랫폼에서 색상을 변경하기 위해 모든 조합을 시도했으며 결국 다음과 같습니다.

-webkit-text-fill-color: red;

그 트릭을했다.

Bourbon을 사용하는 SASS / SCSS 사용자의 경우 내장 기능이 있습니다.

//main.scss
@import 'bourbon';

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

CSS 출력,이 부분을 잡고 코드에 붙여 넣을 수도 있습니다.

//main.css

input {
  width: 300px;
}

input::-webkit-input-placeholder {
  color: red;
}
input:-moz-placeholder {
  color: red;
}
input::-moz-placeholder {
  color: red;
}
input:-ms-input-placeholder {
  color: red;
}

다른 입력 요소마다 다른 스타일 로이 코드를 사용해보십시오.

your css selector::-webkit-input-placeholder { /*for webkit */
    color:#909090;
    opacity:1;
}
 your css selector:-moz-placeholder { /*for mozilla */
    color:#909090;
    opacity:1;
}
 your css selector:-ms-input-placeholder { /*for for internet exprolar */ 
   color:#909090;
   opacity:1;
}

예 1 :

input[type="text"]::-webkit-input-placeholder { /*for webkit */
    color: red;
    opacity:1;
}
 input[type="text"]:-moz-placeholder { /*for mozilla */
    color: red;
    opacity:1;
}
 input[type="text"]:-ms-input-placeholder { /*for for internet exprolar */ 
   color: red;
   opacity:1;
}

예 2 :

input[type="email"]::-webkit-input-placeholder { /*for webkit */
    color: gray;
    opacity:1;
}
 input[type="email"]:-moz-placeholder { /*for mozilla */
    color: gray;
    opacity:1;
}
 input[type="email"]:-ms-input-placeholder { /*for for internet exprolar */ 
   color: gray;
   }

여기 또 다른 예가 있습니다 :

.form-control::-webkit-input-placeholder {
  color: red;
  width: 250px;
}
h1 {
  color: red;
}

<div class="col-sm-4">
  <input class="form-control" placeholder="Enter text here.." ng-model="Email" required/>
</div>

실제로 매우 훌륭하고 간단한 가능성 추가 : css filters !

자리 표시자를 포함하여 모든 스타일을 지정합니다.

다음은 색상 변경을 위해 색조 필터를 사용하여 동일한 팔레트에서 두 입력을 설정합니다. 브라우저에서 매우 잘 렌더링됩니다 (예 : ... 제외)

input {
  filter: sepia(100%) saturate(400%) grayscale(0) contrast(200%) hue-rotate(68deg) invert(18%);
}

<input placeholder="Hello world!" />
<input type="date" /><br>
<input type="range" />
<input type="color" />

입력 유형 색상을 사용하여 변경하거나 뉘앙스를 찾으려면 사용자가 동적으로 변경할 수 있도록하려면이 스 니펫을 확인하십시오.

보낸 사람 : https://codepen.io/Nico_KraZhtest/pen/bWExEB

function stylElem() {
  stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0)
  Array.from(document.querySelectorAll('input, audio, video')).forEach(function(e){
      e.style.cssText += ";filter:sepia(100%) saturate(400%)grayscale(0)contrast(200%)hue-rotate("+ stylo.dataset.hue+"deg)invert("+(stylo.dataset.hue/3.6)+"%)"
  out.innerText = e.style.cssText
})()}

stylElem()

<div id="out"></div> <p>
  <input placeholder="Hello world!" />
  <input type="date" /><br>
  <input type="range" />
  <input type="color" />
Colors (change me)-> 
<input type="color" id="stylo" oninput="stylElem()" /> <br><br>
<audio controls src="#"></audio> <br><br> 
<video controls src="#"></video>

CSS 필터 문서 : https://developer.mozilla.org/en-US/docs/Web/CSS/filter

자, 자리 표시자는 브라우저마다 다르게 동작하므로 CSS에서 브라우저 접두사를 사용하여 동일하게 만들어야합니다. 예를 들어 Firefox는 기본적으로 자리 표시 자에게 투명성을 제공하므로 CSS에 불투명도 1을 추가해야합니다. 색상은 그렇지 않습니다. 대부분의 경우 큰 관심사이지만 일관되게 유지하는 것이 좋습니다.

*::-webkit-input-placeholder { /* WebKit browsers */
    color:    #ccc;
}
*:-moz-placeholder { /* Mozilla Firefox <18 */
    color:    #ccc;
    opacity:  1;
}
*::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #ccc;
    opacity:  1;
}
*:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #ccc;
}

CSS를 사용하여 HTML5 입력의 자리 표시 자 색상을 변경할 수 있습니다. 우연히 CSS 충돌이 발생하면이 코드 노트가 작동하면 아래와 같이 (! 중요)를 사용할 수 있습니다.

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

<input placeholder="Stack Snippets are awesome!">

이것이 도움이되기를 바랍니다.

입력 및 초점 스타일에이를 사용할 수 있습니다.

input::-webkit-input-placeholder  { color:#666;}
input:-moz-placeholder  { color:#666;}
input::-moz-placeholder { color:#666;}
input:-ms-input-placeholder  { color:#666;}
/* focus */
input:focus::-webkit-input-placeholder { color:#eee; }
input:focus:-moz-placeholder { color:#eee } /* FF 4-18 */
input:focus::-moz-placeholder { color:#eee } /* FF 19+ */
input:focus:-ms-input-placeholder { color:#eee } /* IE 10+ */

가장 쉬운 방법은 다음과 같습니다.

#yourInput::placeholder {
    color: red;/*As an example*/
}
/* if that would not work, you can always try styling the attribute itself: */
#myInput[placeholder] {
    color: red;
}

Compass 에는 즉시 사용할 수있는 믹스 인이 있습니다.

예를 들어 보자.

<input type="text" placeholder="Value">

그리고 나침반을 사용하는 SCSS에서 :

input[type='text'] {
  @include input-placeholder {
    color: #616161;
  }
}

입력 자리 표시 자 믹스 인에 대한 문서를 참조하십시오.

CSS 선택기를 사용 하는 솔루션은 다음과 같습니다.

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}

::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}

• WebKit, Blink (Safari, Google Chrome, Opera 15+) 및 Microsoft Edge 는 의사 요소 (예 :
  ::-webkit-input-placeholder)를 사용합니다.
• Mozilla Firefox 4 ~ 18
  4-18 은 의사 클래스 : -moz-placeholder (한 콜론)를 사용합니다.
  Mozilla Firefox 19+ 는 의사 요소
  ::-moz-placeholder를 사용하지만 이전 선택기는 여전히 한동안 작동합니다.
• Internet Explorer 10 및 11 은 의사 클래스
  : -ms-input-placeholder를 사용하고 있습니다.
• 인터넷 익스플로러 9 이하는 플레이스 홀더 속성을 전혀 지원하지 않지만 Opera 12 이하는 플레이스 홀더에 대한 CSS 선택기를 지원하지 않습니다.

HTML의 일부 :

 <form action="www.anything.com">
 <input type="text" name="name"
  placeholder="Enter sentence"/>
  </form>

CSS로 'Enter 문장'의 표현 색상을 변경하는 방법을 보여 드리겠습니다.

  ::placeholder{
  color:blue;
   }