it-swarm-ko.tech

CSS로 HTML5 입력의 자리 표시 자 색상 변경

Chrome은 자리 표시 자 속성input[type=text] 요소를 지원합니다 (다른 사용자도 마찬가지입니다).

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

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}
<input type="text" placeholder="Value">

Value은 grey 대신 red로 남습니다.

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

htmlcsshtml5placeholderhtml-input
3744
David Murdoch

이행

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

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

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

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

CSS 선택기

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

유효하지 않은 선택기를 포함하는 선택기의 group 이 유효하지 않습니다.

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

::-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를 사용합니다. 예기치 않은 방식으로 렌더링에 영향을 줄 수 있습니다. properties-webkit-appearance 및 -moz-appearance를 사용하여 변경하십시오. 예:
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }
4720
fuxia

/* 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 자리 표시자가 스타일을 지정합니다.

중요 사항 : 이 규칙을 그룹화하지 마십시오. 대신 모든 선택기에 대해 별도의 규칙을 만드십시오 (그룹의 한 잘못된 선택기가 전체 그룹을 유효하지 않게 만듭니다).

684
brillout

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

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

Bootstrap 및 Less users의 경우 mixin .placeholder가 있습니다.

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

Toscho의 대답 외에도 Chrome 9-10과 Safari 5 사이의 웹킷 불일치가 CSS 속성이 지원된다는 사실을 눈치 채지 못했습니다.

특히 Chrome 9 및 10은 자리 표시 자 스타일을 지정할 때 background-color, border, text-decoration 및 text-transform를 지원하지 않습니다.

전체 브라우저 간 비교는 여기 입니다.

95
ajcw

Sass users의 경우 :

// 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);
}
71
Konst_

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

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

56
Love Trivedi

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; 
}
46
Dionysios Arvanitis

크로스 브라우저 솔루션 :

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

39
Kristian

autoprefixer 를 사용하면 새로운 ::placeholder를 사용하십시오.

Bootstrap 의 .placeholder mixin은이 대신에 사용되지 않습니다.

예:

input::placeholder { color: black; }

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

37
Mike

이제 입력의 자리 표시 자에 CSS를 적용하는 표준 방법이 있습니다. ::placeholder pseudo-element from this CSS 모듈 수준 4 초안.

37
user3790069

Mozilla Firefox 19+에서 브라우저가 placeholder에 대한 불투명도 값을 제공한다는 것을 깨닫기 때문에 실제로 원하는 색상이 될 수 없습니다.

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

opacity을 1로 덮어 쓰면 좋을 것입니다.

34
Burak Tokak

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

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

나는 인터넷에서이 코드 스 니펫을 발견했다는 것을 기억하지 못한다. (그것은 내가 작성한 것이 아니고, 내가 어디에서 발견했는지, 누가 쓴 것인지 기억하지 못한다.).

$('[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('');
            }
        })
    });

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

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

Bootstrap users의 경우 class="form-control"를 사용하는 경우 CSS 관련 문제가있을 수 있습니다. 더 높은 우선 순위를 얻어야합니다.

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

또는 Less 를 사용하는 경우 :

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

이것은 어떤가요

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

CSS 또는 자리 표시자가 없지만 동일한 기능을 제공합니다.

17
user1729061

이 짧고 깨끗한 코드 :

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

Bootstrap 을 사용하고 있고 이것이 작동하지 않는다면 아마도 Bootstrap 자체가 이러한 선택기를 추가한다는 사실을 놓쳤을 것입니다. 이것이 우리가 말하는 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;
}
16
steady_daddy

내 모바일 플랫폼에서 색상을 변경하려면 여기에 모든 조합을 시도하고 결국 그것은 :

-webkit-text-fill-color: red;

그것은 트릭을했다.

14
aviram83

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

이 코드를 다른 스타일의 다른 입력 요소에 사용하십시오.

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;
   }
6
Md. Abu Sayed

다음은 한 가지 예입니다.

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

5
Mahendra Kulkarni

실제로 아주 좋고 간단한 가능성을 추가 : css filters ! 

 enter image description here

 enter image description here

 enter image description here

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

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

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

4
Cryptopat

OK, 자리 표시자는 다른 브라우저에서 다르게 동작하므로 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;
}
4
Alireza

CSS로 HTML5 입력의 자리 표시 자 색상을 변경할 수 있습니다. 우연히, 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!">

희망이 도움이 될 것입니다.

3
Deepak Kumar

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

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+ */
2
fraweb

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

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

컴퍼스 이 상자에 넣기 위해 믹스 인이 있습니다.

귀하의 예를 들어보십시오 :

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

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

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

입력 - 자리 표시 자 mixin에 대한 문서 참조

1
bendav91

HTML의 일부 :

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

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

  ::placeholder{
  color:blue;
   }
0
Kheyraddin

이것을 시도하면 모든 fav 브라우저에서 작동합니다.

::-webkit-input-placeholder { 
    /* Chrome/Opera/Safari */
      color: pink;
    }
    ::-moz-placeholder { 
    /* Firefox 19+ */
      color: pink;
    }

    :-moz-placeholder { 
    /* Firefox 18- */
      color: pink;
    }
0
Anand

다른 브라우저의 특정 요소에 자리 표시 자 색상.

HTML

<input class='contact' type="email" placeholder="[email protected]">

CSS 

    .contact::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      color: pink;
    }
    .contact::-moz-placeholder { /* Firefox 19+ */
      color: pink;
    }
    .contact:-ms-input-placeholder { /* IE 10+ */
      color: pink;
    }
    .contact:-moz-placeholder { /* Firefox 18- */
      color: pink;
    }
0
Majedur Rahaman