html - tag - placeholder 사용법




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

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

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

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

Value 은 여전히 red 대신 grey 유지됩니다.

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


이행

pseudo-element, pseudo-class, 및 nothing의 세 가지 구현이 있습니다.

  • WebKit, Blink (Safari, Google Chrome, Opera 15 이상) 및 Microsoft Edge는 pseudo-element : ::-webkit-input-placeholder 있습니다. [ Ref ]
  • 모질라 파이어 폭스 4에서 18까지는 pseudo-class : :-moz-placeholder (콜론)를 사용하고 있습니다. [ Ref ]
  • 모질라 파이어 폭스 19+는 pseudo-element ::-moz-placeholder 하고 있지만 이전의 선택자는 여전히 잠시 동안 작동합니다. [ Ref ]
  • Internet Explorer 10 및 11은 의사 클래스 : :-ms-input-placeholder 있습니다. [ Ref ]
  • 2017 년 4 월 : 대부분의 최신 브라우저는 간단한 의사 요소 ::placeholder [ Ref ]

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

최상의 구현에 대한 논의는 계속 진행 중입니다. 의사 요소는 그림자 DOM 에서 실제 요소처럼 작동 합니다 . input 에 대한 padding 은 의사 요소와 동일한 배경색을 갖지 않습니다.

CSS 선택자

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

유효하지 않은 선택자를 포함하는 선택자 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 를 사용해야합니다 (여기서는 opacity: 1 .
  • 자리 표시 자 텍스트가 맞지 않으면 잘라내기만하면됩니다. 입력 요소의 크기를 em 설정하고 큰 최소 글꼴 크기 설정으로 테스트하십시오. 번역을 잊지 마십시오. 일부 언어는 동일한 단어에 대해 더 많은 공간이 필요합니다.
  • placeholder 대한 HTML 지원이 있지만 Opera 용 CSS 지원이없는 브라우저도 테스트해야합니다.
  • 일부 브라우저는 일부 input 유형 ( email , search )에 기본 CSS를 추가로 사용합니다. 예상치 못한 방식으로 렌더링에 영향을 줄 수 있습니다. 이를 변경하려면 -webkit-appearance-moz-appearance properties 사용하십시오. 예:
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

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

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


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로 덮어 쓰면 좋을 것입니다.


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

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

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

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

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

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

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>


이 짧고 깨끗한 코드 :

::-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 또는 자리 표시자가 없지만 동일한 기능을 사용할 수 있습니다.


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

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

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

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


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

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

크로스 브라우저 솔루션 :

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


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


Bootstrap 및 사용자 수가 적 으면 mixin .placeholder가 있습니다.

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

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

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

또는 Less 를 사용하는 경우 :

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

autoprefixer 를 사용하는 경우 new ::placeholder 를 사용 autoprefixer .

Bootstrap 의 .placeholder mixin은이 점에서 바람직하지 않습니다.

예:

input::placeholder { color: black; }

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


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

이렇게하면 모든 inputtextarea 자리 표시자가 스타일을 지정합니다.

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





html-input