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

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

Chrome v4는 다음에서 자리 표시자 특성을 지원합니다.input[type=text]요소(아마도 그렇게 할 것입니다).

그러나 다음 CSS는 자리 표시자의 값에 아무런 영향을 주지 않습니다.

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

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

Value여전히 남아 있을 것입니다.grey에 red.

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

실행

세 가지 다른 구현이 있습니다. 의사 요소, 의사 클래스, 그리고 아무것도 없습니다.

• WebKit, Blink(Safari, Google Chrome, Opera 15+) 및 Microsoft Edge는 유사 요소를 사용합니다.::-webkit-input-placeholder. ^[Ref]
• 클래스를 . Mozilla Firefox 4-18은 다음과 같습니다.:-moz-placeholder(콜론 하나).^[Ref]
• 19요소를 . Mozilla Firefox 19+는 다음과 같습니다.::-moz-placeholder하지만 오래된 선택기는 당분간 작동할 것입니다.^[Ref]
• Internet Explorer 10 및 11은 유사 클래스를 사용합니다.:-ms-input-placeholder. ^[Ref]
• 2017년 4월: 대부분의 현대 브라우저는 단순한 유사 요소를 지원합니다.

9에서는 Internet Explorer 9을 .placeholder오페라 12 이하에서는 자리 표시자에 대한 CSS 선택기를 지원하지 않습니다.

최상의 구현에 대한 논의는 여전히 진행 중입니다.유사 요소는 섀도 DOM에서 실제 요소처럼 작동합니다.apaddinginput유사 패턴과 동일한 배경색을 얻지 못합니다.

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의 Firefox를 사용해야 .opacity: 1여기서.
• – 를 리표시자텍맞않잘립다니면으지자가스트▁your다로 조정하십시오. 입력 요소의 크기를 조정합니다.em큰 최소 글꼴 크기 설정으로 테스트합니다.번역을 잊지 마세요: 어떤 언어들은 같은 단어를 위한 더 많은 공간을 필요로 합니다.
• 브라우저는 다음과 .placeholder하지만 그것에 대한 CSS 지원이 없다면 (오페라처럼) 테스트도 해야 합니다.
• 자리 표시자는 레이블을 대체할 수 없으므로 레이블도 있어야 합니다.
• 일브저는를대일추해기가본 에 추가 기본 합니다.input유형)email,search) 이러한 문제는 예상치 못한 방식으로 렌더링에 영향을 줄 수 있습니다.속성 사용 -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: #FF9900;
}

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

<textarea rows="4" cols="50" placeholder="Stack Snippets are nice!">
</textarea>

Bootstrap 및 Less 사용자의 경우 .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및은 히Chrome 9 및 10 은지않다습니를 지원하지 .background-color,border,text-decoration그리고.text-transform자리 표시자를 스타일링할 때.

브라우저 간의 전체 비교는 다음과 같습니다.

Sass 사용자의 경우:

// 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; 
}

는 CSS를 합니다.::placeholder사이비 종교의

부트스트랩의 .placeholder mixin은 이를 위해 더 이상 사용되지 않습니다.

예:

input::placeholder { color: black; }

자동 접두사를 사용하면 위의 코드가 모든 브라우저에 적합한 코드로 변환됩니다.

크로스 브라우저 솔루션:

/* 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

있습니다: 이제입력자를표리시에자다 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;
}

덮니다씁을 .opacity1인분, 그래서 가기 좋을 것입니다.

인터넷에서 이 코드 조각을 어디서 찾았는지 기억하지 못합니다(내가 작성한 것이 아니며, 내가 어디서 찾았는지, 누가 작성했는지도 기억하지 못합니다)

$('[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. */
}

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

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

또는 적은 값을 사용하는 경우:

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

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

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

만약 당신이 부트스트랩을 사용하고 있고 이것을 작동시킬 수 없다면, 아마도 당신은 부트스트랩 자체가 이러한 선택기를 추가한다는 사실을 놓쳤을 것입니다.이것은 우리가 이야기하고 있는 부트스트랩 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;
}

이것은 어떻습니까?

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

CSS나 자리 표시자는 없지만 동일한 기능을 사용할 수 있습니다.

이 짧고 깨끗한 코드:

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

모바일 플랫폼에서 색상을 변경하기 위해 모든 조합을 시도해 보았는데, 결국 다음과 같습니다.

-webkit-text-fill-color: red;

그것이 효과가 있었습니다.

실제 매우 멋지고 간단한 가능성 추가: CSS 필터!

그것은 자리 표시자를 포함한 모든 것을 스타일화할 것입니다.

다음은 두 가지를 모두 설정합니다.input색상 변경에 색상 필터를 사용하여 동일한 팔레트의 요소를 표시합니다.이제 브라우저에서 매우 잘 렌더링됩니다(예: ... 제외).

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" />

사용자가 변경사항에 대한 입력 유형 색상을 사용하여 동적으로 변경하거나 뉘앙스를 찾으려면 다음 스니펫을 확인하십시오.

보낸이: 코데펜

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()

body {background: black; color: white}

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

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

부르봉을 사용하는 SAS/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;
   }

이것은 대부분의 최신 브라우저에 적합합니다.

input::placeholder{
  color: red; // css implementation
}

SCSS를 사용하는 경우에 대비하여

input {
  &::placeholder {
    color: red; // scss
  }
}

다음은 한 가지 예입니다.

.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>

HTML5 입력의 자리 표시자 색상을 CSS로 변경할 수 있습니다.만약 우연히 당신의 CSS가 충돌한다면, 이 코드 노트가 작동한다면, 당신은 아래와 같이 (!important)를 사용할 수 있습니다.

::-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!">

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

좋아요, 자리 표시자는 브라우저마다 다르게 동작하기 때문에 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;
}

::placeholder{
  color: red;
}

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

입력 및 포커스 스타일에 사용할 수 있습니다.

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;
}

다음은 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에서 유사 클래스를 사용하고 있습니다.
  -px-placeholder(자리 표시자)입니다.
  Mozilla Firefox 19+에서 유사 요소를 사용하고 있습니다.
  ::-vlan-placeholder이지만 이전 선택기는 계속 작동합니다.
• Internet Explorer 10 및 11은 유사 클래스를 사용합니다.
  :-ms-input-placeholder.
• Internet Explorer 9 이하에서는 자리 표시자 속성을 전혀 지원하지 않지만 Opera 12 이하에서는 자리 표시자에 대한 CSS 선택기를 지원하지 않습니다.

언급URL : https://stackoverflow.com/questions/2610497/change-an-html-inputs-placeholder-color-with-css