입력 내에서 자주 회색으로 표시되는 텍스트 요소인 자리 표시자는 스타일을 지정하기 어려울 수 있습니다. 다행스럽게도 우리는 입력 자리 표시자 텍스트의 스타일을 원하는 색상과 불투명도로 지정할 수 있는 짧지만 효과적인 CSS 솔루션을 제공합니다. 코드를 읽어보세요.

자리 표시자 텍스트 색상 변경

간단한 입력과 일부 자리 표시자 텍스트로 시작하겠습니다. 이 예에서는 "검색"이라는 단어를 사용하지만 원하는 것은 무엇이든 사용할 수 있습니다. 기본 HTML은 아래와 같습니다.

HTML

입력(및 텍스트 영역) 자리 표시자 텍스트는 기본적으로 연한 회색이지만 CSS 몇 줄로 변경할 수 있습니다. 여기서는 HTML 색상 이름을 사용하여 입력 텍스트를 빨간색으로 지정하지만 어떤 색상 방법(HEX, RGB, HSL)으로도 충분합니다.

CSS

::-webkit-input-placeholder ( /* Chrome */ color: red; ) :-ms-input-placeholder ( /* IE 10+ */ color: red; ) ::-moz-placeholder ( /* Firefox 19 + */ 색상: 빨간색; 불투명도: 1; ) :-moz-placeholder ( /* Firefox 4 - 18 */ 색상: 빨간색; 불투명도: 1; )

가능한 한 많은 브라우저를 지원하려면 다양한 공급업체 접두사를 포함하는 것이 중요합니다. Firefox의 입력 자리 표시자 텍스트만 약간의 투명도로 기본 설정되므로 IE 또는 Chrome에서 불투명도 속성을 설정할 필요가 없습니다.

자리 표시자 포커스 텍스트 색상 변경

좋습니다. 자리 표시자 텍스트의 색상을 빨간색으로 성공적으로 변경했지만 사용자가 입력 내부를 클릭할 때 어떤 일이 발생하면 좋을 것입니다. 동일한 공급업체 접두사 CSS 속성을 사용하여 입력 자리 표시자 텍스트의 불투명도를 변경할 수 있습니다. 초점에.

CSS

입력( 윤곽선: 없음; 패딩: 12px; 테두리 반경: 3px; 테두리: 1px 단색 검정색; ) ::-webkit-input-placeholder ( /* Chrome */ 색상: 빨간색; 전환: 불투명도 250ms Ease-In-Out ; ) :focus::-webkit-input-placeholder ( 불투명도: 0.5; ) :-ms-input-placeholder ( /* IE 10+ */ color: red; 전환: 불투명도 250ms easy-in-out; ) :focus :-ms-input-placeholder ( 불투명도: 0.5; ) ::-moz-placeholder ( /* Firefox 19+ */ 색상: 빨간색; 불투명도: 1; 전환: 불투명도 250ms easy-in-out; ) :focus:: -moz-placeholder ( 불투명도: 0.5; ) :-moz-placeholder ( /* Firefox 4 - 18 */ 색상: 빨간색; 불투명도: 1; 전환: 불투명도 250ms easy-in-out; ) :focus:-moz-placeholder (불투명도: 0.5; )

위의 예에서는 입력 자체에 몇 가지 기본 스타일을 추가하고 불투명도에 전환을 추가하여 경험을 좀 더 좋게 만들었습니다. 데모를 확인하고 다른 CSS 속성 및 전환을 실험해 보세요.

자리 표시자는 도구 설명을 배치할 수 있는 입력 필드의 요소입니다. 사용자가 데이터를 입력하기 시작하면 방해가 되지 않도록 지원 텍스트가 사라집니다. 각 브라우저에는 이 요소가 표시되는 방식에 대한 자체 의견이 있으며 때로는 기본 스타일이 전체 디자인을 깨뜨리는 경우도 있습니다. 이를 관리하려면 특별한 CSS 자리 표시자 규칙을 사용해야 합니다.

자리표시자는 어디에 있나요?

문제는 입력 필드의 툴팁이 Shadow DOM에 단단히 숨겨져 있어 접근하기가 쉽지 않다는 것입니다. 이를 위해 특별한 비표준 :: 자리 표시자가 사용됩니다. 이를 통해 도구 설명의 속성을 관리할 수 있습니다.

CSS에서 자리 표시자의 스타일은 다음과 같습니다.

입력::자리 표시자( 색상: 빨간색; 불투명도: 1; 글꼴 스타일: 기울임꼴; )

브라우저 지원

CSS 자리 표시자 의사 요소는 모든 최신 브라우저에서 잘 처리되며 이전 브라우저를 지원하려면 다음 접두사를 사용할 수 있습니다.

• ::-webkit-input-placeholder - 웹킷 브라우저(Safari, Chrome, Opera)용;
• ::-moz-placeholder - 버전 19 이상의 Firefox 브라우저용;
• :-moz-placeholder - 이전 Firefox용;
• :-ms-입력-자리 표시자 - 인터넷 익스플로러버전 10 이상.

보시다시피 오래된 모질라 브라우저, IE와 마찬가지로 자리 표시자를 의사 요소가 아닌 CSS 의사 클래스로 간주합니다. 그들과 논쟁하지 말자. 우리는 입력 필드의 스타일을 지정할 때 이 측면을 고려할 것이다.

스타일링 옵션

CSS의 자리 표시자 의사 요소에 대해 다음 옵션을 설정할 수 있습니다.

• 배경 - 도구 설명 블록 그룹은 전체 입력 필드에 적용됩니다. 색상(배경색) 뿐만 아니라 이미지(배경이미지)도 설정할 수 있습니다.
• 텍스트 색상 - 색상;
• 투명도 - 불투명도;
• 밑줄, 윗줄 또는 취소 - 텍스트 장식;
• 사례 - 텍스트 변환;
• 내부 들여쓰기 - 패딩. 모든 브라우저에서 지원되지는 않습니다. 인라인 요소와 마찬가지로 위쪽 및 아래쪽 패딩은 무시됩니다.
• 글꼴 표시 - 글꼴 그룹의 속성, 줄 높이 및 다양한 들여쓰기(텍스트 들여쓰기, 문자 간격, 단어 간격)
• 한 줄의 수직 정렬 - 수직 정렬;
• 컨테이너가 오버플로될 때 텍스트 자르기 - text-overflow.

.input1::placeholder ( 배경 이미지: 선형 그라데이션(연회색, 파란색); 색상: 흰색; ) .input2::placeholder ( 텍스트 장식: 선 통과; 색상: 보라색; 글꼴 두께: 굵게; ) . input3::placeholder ( 글꼴 크기: 16px; 문자 간격: 10px; ) .input4::placeholder ( 배경: 갈색; 색상: 흰색; 텍스트 오버플로: 줄임표; )

집중하고있는

기본적으로 도구 설명은 하나 이상의 문자를 입력한 경우에만 입력 필드에서 사라집니다. 그러나 자리 표시자를 사용하면 현장에 집중할 때 즉시 사라지는 기능을 구현할 수 있습니다. 이렇게 하려면 이를 pseudo-class:focus와 결합해야 합니다.

입력:초점::자리 표시자(색상: 투명; )

일부 브라우저에서는 전환 문을 사용하여 여러 자리 표시자 속성의 변경 사항을 애니메이션으로 표시할 수 있습니다.

입력::자리 표시자( 색상: 검정색; 전환: 색상 1s; ) 입력:초점::자리 표시자( 색상: 흰색; )

안에 구글 브라우저해당 필드에 초점을 맞추면 Chrome 툴팁 색상이 1초 이내에 원활하게 변경됩니다.

자리 표시자 속성은 빈 입력 필드(태그) 내에 도구 설명을 만드는 데 사용됩니다. 그리고 ). 이 기사에서는 자리 표시자의 스타일을 지정하는 방법과 이를 보다 사용자 친화적으로 만드는 방법을 살펴보겠습니다.</p> <p>자리 표시자가 무엇인지, 어떻게 사용하는지 아직 모르는 사람들을 위한 예부터 시작해 보겠습니다.</p> <input type= "email" placeholder= "example@gmail.com" > <p> <input type="email" placeholder="example@gmail.com" class="demo-css-placeholders-input"></p> <p>인터페이스를 개발할 때 자리 표시자의 동작을 고려해야 합니다. 자리표시자 텍스트는 입력이 시작되자마자 사라집니다. 그렇기 때문에 입력 필드 자체에 대한 정보(포함해야 하는 문자 수와 문자 수)를 전송하는 데 이를 사용해서는 안 됩니다. 이러한 목적으로 태그를 사용하는 것이 가장 좋습니다. <label>또는 작은 힌트가 있는 단락. 자리 표시자 사용 기능에 대해 자세히 알아볼 수 있습니다.</p> <h2>양식화</h2> <p>자리 표시자의 스타일을 지정하는 데 다음 규칙이 사용됩니다.</p>::-webkit-input-placeholder ( color : blue ; ) ::-moz-placeholder ( color : blue ; ) /* Firefox 19+ */ :-moz-placeholder ( color : blue ; ) /* Firefox 18- * / :-ms-input-placeholder ( 색상 : 파란색 ; ) <p>정말 끔찍해 보이지 않나요? 여기에는 이유가 있습니다. 지금까지 자리 표시자에 대한 CSS 규칙은 표준화되지 않았으며 구현은 브라우저마다 다릅니다. 필요한 모든 접두사에 대한 자세한 내용은 caniuse에서 찾을 수 있습니다.</p> <p>CSS 전처리기를 사용하는 경우 자리표시자에 스타일을 적용하는 간단한 믹스인을 작성하는 것이 가장 편할 것입니다. Sass의 예:</p>@mixin placeholder ( & : :- webkit-input-placeholder ( @content ; ) & : - moz-placeholder ( @content ; ) & : :- moz-placeholder ( @content ; ) & : - ms-input-placeholder ( @콘텐츠 ; ) ) <p>상황에 따라 믹스인을 사용하여 전역적으로 또는 개별 요소별로 스타일을 적용할 수 있습니다(SassMeister에서 사용해 보세요).</p> <span>// 각 입력 필드에 대해 전역적으로</span>@include 자리 표시자( 색상 : 파란색 ; ) <span>// 특정 입력 필드의 경우</span>.input ( @include 자리 표시자 ( color : green ; ) ) <h4>예</h4> <p>자리 표시자를 위한 파란색 텍스트(이렇게 하지 마세요):</p>.blue-text ::-webkit-input-placeholder ( 색상 : #2e8ece ; ) .blue-text :-moz-placeholder ( 색상 : #2e8ece ; ) .blue-text ::-moz-placeholder ( 색상 : #2e8ece ; ) .blue-text :-ms-input-placeholder ( 색상 : #2e8ece ; ) <p> <input type="text" placeholder="여기에 입력을 시작하세요" class="demo-css-placeholders-input pl-blue-text"></p> <h2>지원되는 속성</h2> <p>전부는 아니다 <a href="https://whatsappss.ru/ko/security/kontent-zanimaet-70-shiriny-stranicy-parametry-css-width-i-height-dlya.html">CSS 속성</a>자리 표시자와 함께 사용할 수 있습니다. 여기 <a href="https://whatsappss.ru/ko/multimedia/polnyi-spisok-stop-slov-dlya-instagram-stop-slova-skachaite-odin-iz-samyh-moshchnyh.html">전체 목록</a>지원되는 속성:</p> <ul><li>글꼴 및 모든 관련 속성(글꼴 크기, 글꼴 모음 등)</li> <li>배경 및 모든 관련 속성(배경색, 배경 이미지 등)</li> <li>불투명</li> <li>텍스트 들여쓰기</li> <li>텍스트 오버플로</li> <li>색상</li> <li>텍스트 변환</li> <li>선 높이</li> <li>단어 간격</li> <li>문자 간격</li> <li>텍스트 장식</li> <li>수직 정렬</li> </ul><h2>애니메이션</h2> <p>애니메이션 아이디어는 블로그 html5.by에 속합니다.</p> <p>다음 예제는 모두 Sass 전처리기를 사용하여 작성되었습니다. 각각에는 컴파일된 CSS 코드를 찾을 수 있는 SassMeister에 대한 링크가 함께 제공됩니다.</p> <p>대부분의 경우 입력 필드에 포커스가 있을 때 자리 표시자에 애니메이션을 적용하고 싶을 것입니다. 이 모든 작업은 아주 간단하게 수행됩니다. 이전에 작성한 자리 표시자 믹스인을 몇 번만 사용하면 충분합니다.</p>.input( @include 자리 표시자( <span>// 정상 상태에 대한 스타일</span>) & :focus ( @include 자리 표시자( <span>// 포커스 이벤트 이후의 스타일</span> } } } <h3>투명도 변경</h3>.input ( @include 자리 표시자 ( 색상: #aaa ; 불투명도: 1 ; 전환: 불투명도 300ms ; ) & :focus ( @include 자리 표시자 ( 불투명도: 0 ; ) ) ) <p> <input type="text" placeholder="데모: 투명도 변경" class="demo-css-placeholders-input pl-opacity"></p> <h3>오른쪽과 왼쪽으로 이동</h3> <p>입력 필드가 넓을수록 text-indent 속성 값도 커야 합니다. 표준 입력 필드의 경우 500px이면 충분하며 더 넓은 입력 필드의 경우 수동으로 선택해야 합니다. 애니메이션 속도는 입력 필드의 너비와 텍스트 들여쓰기 값에 따라 달라집니다. 왼쪽으로 이동하려면 음수 값(예: -500px )을 사용해야 합니다.</p><p> <input type="text" placeholder="데모: 오른쪽으로 이동" class="demo-css-placeholders-input pl-shift-right"><input type="text" placeholder="데모: 왼쪽으로 이동" class="demo-css-placeholders-input pl-shift-left"></p> <h3>아래로 이동</h3> <p>이전 예제와 마찬가지로 입력 크기에 따라 애니메이션이 달라지는데, 이 경우에는 높이에 주의하세요. 대부분의 입력 필드에서 필요한 line-height 값은 100px 이내입니다. 불행하게도 line-height 속성은 음수 값을 허용하지 않기 때문에 상향 이동 효과를 생성하는 데 사용할 수 없습니다.</p>.input ( @include 자리 표시자 ( text-indent : 0px ; 전환 : 텍스트 들여쓰기 300ms ; ) & :focus ( @include 자리 표시자 ( text-indent : 500px ; ) ) ) <p> <input type="text" placeholder="데모: 아래로 이동" class="demo-css-placeholders-input pl-shift-down"></p> <h3>함께</h3> <p>자리 표시자에 대한 애니메이션 코드를 즐겁고 편리하게 사용하려면 모든 전처리기에 대한 작은 믹스인 라이브러리를 작성할 수 있습니다. 라이브러리는 다음과 같습니다().</p>@mixin 자리 표시자 ( & : :- webkit-input-placeholder ( @content ) & : - moz- 자리 표시자 ( @content ) & : :- moz- 자리 표시자 ( @content ) & : - ms-input-placeholder ( @content ) ) @mixin pl-shift ($side : left , $position : 500px , $duration : 200ms ) ( @include 자리 표시자 ( text-indent : 0 ; 전환 : text-indent $duration ; ) & :focus ( @include 자리 표시자 ( text-indent : if ($side == left , - $position , $position ); ) ) ) @mixin pl-slide-down ($position : 5 , $duration : 200ms ) ( @include 자리 표시자 ( line-height : 1 ; 전환: 선 높이 $duration ; ) & :focus ( @include 자리 표시자 ( line-height : $position ; ) ) ) @mixin pl-fade-out ($duration : 200ms ) ( @include 자리 표시자 ( 불투명도: 1 ; 전환: 불투명도 $duration ; ) & :focus ( @include 자리 표시자 ( 불투명도: 0 ; ) ) ) <p>사용하기가 매우 쉽습니다. 원하는 믹스인을 입력 필드에 연결하거나 페이지의 모든 페이스홀더에 대해 하나의 전역 규칙을 만드는 것으로 충분합니다.</p> <span>// 개별 요소의 경우</span>.pl-shift-right ( @include pl-shift ( 오른쪽 ); ) .pl-fade-out ( @include pl-fade-out ; ) <span>// 그 밖의 모든 것</span>@include pl-shift ( 왼쪽 ); <h2>자동 접두어</h2> <p>전처리기를 사용하지 않고 CSS 소스 파일이 모든 사람이 볼 수 있도록 접두사로 뒤덮이는 것을 원하지 않는 경우 <a href="https://whatsappss.ru/ko/tools/medlenno-gruzit-stranicy-dolgo-gruzyatsya-stranicy-v-brauzere-vse.html">가능한 브라우저</a>, Autoprefixer에 주의하세요. 그의 도움으로 <a href="https://whatsappss.ru/ko/what-to-do/kakoi-atribut-tega-font-pozvolyaet-ustanovit-cvet-tegi-font-face-size.html">순수 CSS</a>모든 속성에 필요한 접두어를 모두 추가하면 더티(그러나 다른 파일)로 만들 수 있습니다. 플러그인이 자리 표시자와 함께 작동하도록 하려면 pseudo-element::placeholder를 사용하면 됩니다.</p>:: 자리표시자 ( 색상 : 주황색 ; ) . 입력::자리표시자(색상:파란색;) <p>스타일을 구문 분석한 후 Autoprefixer는 지정된 모든 브라우저에 필요한 모든 접두사를 작성하는 별도의 CSS 파일을 생성합니다.</p> <h2>무엇 향후 계획</h2> <p>위에서 쓴 것처럼 자리 표시자에 스타일을 적용하는 것과 관련된 모든 것이 아직 표준화되지 않았습니다. 이 문제는 곧 해결될 예정입니다. 선택기 레벨 4 사양에는 의사 클래스인 placeholder-shown 가 추가되었습니다. 이는 현재 존재하는 의사 클래스와 의사 요소의 미친 혼합을 최종적으로 표준화할 것입니다. caniuse에서 지원을 모니터링할 수 있습니다(현재 어떤 브라우저에서도 지원되지 않음).</p> <p>:placeholder-shown을 사용하여 스타일을 적용하는 것이 훨씬 쉽습니다.</p>.input :placeholder-shown ( 색상 : 파란색 ; ) <p>안녕하세요, 오늘은 자리 표시자를 입력에 사용하는 사람을 놀라게 하지 않을 것입니다. 자리 표시자는 텍스트를 입력하면 사라지는 입력 내부에 예시가 포함된 임시 텍스트입니다. 오늘은 자리 표시자에 대한 CSS 스타일을 작성해 보겠습니다.</p> <h2>작업: 자리 표시자를 위한 자신만의 CSS 스타일 만들기</h2> <p>입력에 자리 표시자를 사용하는 세련된 웹사이트가 있다고 가정해 보겠습니다. 자리 표시자의 회색의 지루한 텍스트 스타일을 사이트의 일반적인 스타일과 일관되게 보이게 만들어야 합니다. 이것이 어떻게 달성될 수 있습니까? 아직 모든 브라우저에서 작동하지 않는다고 즉시 말씀 드리겠습니다. 특히 IE 버전 9 이하에서는 전혀 작동하지 않고, 10 이상에서는 여전히 큰 어려움을 겪으며 작동합니다. Firefox와 웹킷 브라우저는 또 다른 문제입니다.</p> <h2>해결 방법: 자리표시자의 CSS 스타일</h2> <p>자, 과제를 정했는데, 어떻게 해결할까요?</p> <p>먼저 테스트 그라운드를 만들어 보겠습니다.</p><p> <input type="text" name="input" placeholder="자리표시자의 텍스트" value="" /> </p><p>완료했습니다. 이제 스타일로 무엇을 할 수 있는지 살펴보겠습니다. webkit과 mozilla에는 자리 표시자에 특별한 스타일을 할당할 수 있는 고유한 수정자가 있습니다: ::-webkit-input-placeholder 및:-moz-placeholder. 사용 방법을 살펴보겠습니다.</p> <p>입력 자체의 스타일과 그 안의 텍스트를 설명하겠습니다(예제에서는 대비를 위해 파란색).</p><p>입력(너비: 250px; 색상: 파란색; 글꼴 두께: 일반; 글꼴 스타일: 일반; )</p><p>이제 Webkit 브라우저(Chrome, Safari, Opera)에 대한 이 입력에서 자리 표시자 텍스트에 대한 특별한 스타일을 작성해 보겠습니다.</p><p>입력::-webkit-input-placeholder( 색상: 빨간색; 글꼴 스타일: 기울임꼴; 글꼴 두께: 굵게; )</p><p>자리 표시자 텍스트를 빨간색으로 만들어 보겠습니다. <a href="https://whatsappss.ru/ko/browser/pervye-tri-vypadayushchih-spiska-v-verhnem-ryadu-prednaznacheny-dlya.html">굵은 이탤릭체</a>. 단일 콜론으로 구분되는 다른 CSS 의사 클래스와 달리 웹킷의 자리 표시자 스타일은 이중 콜론으로 구분됩니다.</p> <p>이제 정확히 동일한 스타일을 작성해 보겠습니다. <a href="https://whatsappss.ru/ko/browser/kak-sdelat-stranicu-startovoi-v-mozile-ustanovka-nachalnoi-stranicy-v.html">모질라 파이어 폭스</a>브라우저:</p><p>입력:-moz-placeholder( 색상: 빨간색; 글꼴 스타일: 기울임꼴; 글꼴 두께: 굵게; )</p><p>준비가 된. 자리표시자용 CSS 스타일은 물론 디자인에 더 적합한 스타일을 작성할 수 있습니다. 작업 데모는 다음에서 볼 수 있습니다.</p> <p>자리 표시자 속성에 익숙하지 않다면 이것이 무엇인지, 어디에 사용되는지 조금 설명해 보겠습니다. 양식 입력 필드에 사용됩니다. 속성은 특정 힌트의 역할을 나타내는 텍스트를 입력 필드에 표시합니다. 이전에 우리 사이트에는 긍정적인 측면인 javascript를 사용한 예가 있었습니다. <a href="https://whatsappss.ru/ko/browser/rekvizity-formy-1s-8-3-rekvizity-upravlyaemoi-formy-1cv8-metody-dlya.html">이 방법</a>크로스 브라우저와 호환됩니다. 이제 입력 및 텍스트 영역 요소에 사용되는 자리 표시자 속성의 스타일을 지정하는 방법에 대해 이야기하겠습니다. <br>이 예의 입력 필드 코드는 다음과 같습니다.</p><p> <input type="text" placeholder="당신의 이름을 입력"> </p><p>출력에서 다음 필드를 얻습니다. <input type="text" placeholder="당신의 이름을 입력"></p> <p>이제 자리 표시자의 스타일을 지정해야 한다고 가정해 보겠습니다. 이를 위해 CSS에 규칙 세트를 작성해야 합니다.</p><p>::-webkit-input-placeholder ( color: #c1c1c1; ) ::-moz-placeholder ( color: #c1c1c1; ) /* Firefox 19+ */ :-moz-placeholder ( color: #c1c1c1; ) /* Firefox 18- */ :-ms-input-placeholder ( 색상: #c1c1c1; )</p><p>우리는 다음을 얻습니다: <input class="plc" type="text" placeholder="당신의 이름을 입력"></p> <p>모든 속성을 변경할 수는 없지만 최신 브라우저에서 지원되는 대부분의 속성 목록은 다음과 같습니다. <br><b>폰트</b>(관련 속성도 있음) <br><b>배경</b>(관련 속성도 있음) <br><b>색상</b><br><b>단어 간격</b><br><b>문자 간격</b><br><b>텍스트 장식</b><br><b>수직 정렬</b><br><b>텍스트 변환</b><br><b>선 높이</b><br><b>텍스트 들여쓰기</b><br><b>텍스트 오버플로</b><br><b>불투명</b></p> <p>안에 <a href="https://whatsappss.ru/ko/administrator/gde-naiti-sohranennyi-fail-dokumenty-hranyashchiesya-v-seti-ili-na.html">다른 브라우저</a>규칙이 다르게 작성되었습니다. 왜냐하면 단일 표준은 없지만 이 기록 세트는 계속해서 관련성이 있습니다. IE 브라우저와 Firefox 버전 18 이하에서는 자리 표시자가 의사 클래스로 인식되며 최신 버전에서는 <a href="https://whatsappss.ru/ko/tips/luchshie-programmy-dlya-android-samye-nuzhnye-prilozheniya-dlya-android.html">파이어폭스 브라우저</a>, 웹킷 및 깜박임은 의사 요소로 처리됩니다.</p><p><b>자리 표시자의 텍스트 단축</b><br>도구 설명이 너무 길어서 입력 필드에 완전히 들어갈 수 없는 경우도 있습니다. 이러한 목적으로 입력 필드의 자리 표시자 텍스트를 줄일 수 있는 추가 속성을 사용할 수도 있습니다.</p><p>입력( text-overflow:ellipsis; ) 입력::-moz-placeholder( text-overflow:ellipsis; ) input:-moz-placeholder( text-overflow:ellipsis; ) 입력:-ms-input-placeholder( text-overflow :줄임표; )</p><p>결과적으로 다음과 같은 자리 표시자가 있는 입력 필드가 생성됩니다. <input class="plc2" type="text" placeholder="당신의 이름을 입력"></p><p><b>필드를 클릭할 때 텍스트 숨기기</b><br>기본적으로 각 브라우저는 자리 표시자의 응답을 다르게 해석합니다. 일부 브라우저에서는 필드를 클릭하면 즉시 숨겨지고, 다른 브라우저에서는 입력 필드에 문자가 하나 이상 있으면 숨겨집니다. 모든 브라우저에서 동일하게 필드를 클릭하면 텍스트가 사라지도록 만들어 보겠습니다.</p><p>:focus::-webkit-input-placeholder ( 색상: 투명; ) :focus::-moz-placeholder ( 색상: 투명; ) :focus:-moz-placeholder ( 색상: 투명; ) :focus:-ms-input -자리 표시자(색상: 투명; )</p><p>우리는 다음과 같은 조치를 취합니다:</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> </article> </section> <section id="sidebar" class="secondary clearfix" role="complementary"> <aside id="nav_menu-3" class="widget widget_nav_menu clearfix"> <h3 class="widgettitle"><span>카테고리</span></h3> <div class="menu-menyu1-container"> <ul id="menu-menyu1" class="menu"> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/ko/category/security/">안전</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/ko/category/multimedia/">멀티미디어</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/ko/category/office-programs/">오피스 프로그램</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/ko/category/utilities/">유용</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/ko/category/administrator/">관리자</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/ko/category/programming/">프로그램 작성</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/ko/category/browser/">브라우저</a></li> </ul> </div> </aside> <aside id="recent-posts-2" class="widget widget_recent_entries clearfix"> <h3 class="widgettitle"><span>최근 항목</span></h3> <ul> <li> <a href="https://whatsappss.ru/ko/browser/kak-ubrat-parol-uchetnoi-zapisi-vindovs-v-spiske-uchetnyh.html">Windows 계정 비밀번호를 제거하는 방법</a> </li> <li> <a href="https://whatsappss.ru/ko/administrator/ne-rabotaet-kamera-v-telefone-na-androide-problemy-skype-ne-rabotaet.html">Skype 문제: 카메라가 작동하지 않습니다. 전면 카메라는 작동하지만 후면 카메라는 작동하지 않습니다.</a> </li> <li> <a href="https://whatsappss.ru/ko/browser/pochemu-ne-rabotaet-knopka-home-na-iphone-ne-rabotaet-knopka-home-na-iphone.html">iPhone 또는 iPad에서 홈 버튼이 작동하지 않습니까?</a> </li> <li> <a href="https://whatsappss.ru/ko/programming/rasstavlyaem-okna-v-windows-s-pomoshchyu-snap-razdelenie-ekrana-uluchshennaya-rabota-s.html">분할 화면 향상된 다중 모니터 경험</a> </li> <li> <a href="https://whatsappss.ru/ko/security/kak-vyvesti-raznoe-izobrazhenie-na-dva-monitora-rasstavlyaem-okna-v-windows-s.html">스냅을 사용하여 Windows에서 창 정렬 향상된 다중 모니터 경험</a> </li> <li> <a href="https://whatsappss.ru/ko/browser/chem-otkryt-psd-kak-otkryt-psd-fail-chteniya-psd.html">PSD를 여는 방법은 무엇입니까? .PSD 파일을 여는 방법? . 독서 psd</a> </li> <li> <a href="https://whatsappss.ru/ko/utilities/kak-knopkami-sdelat-zhestkuyu-perezagruzku-iphone-i-ipad-vse-modeli-chto-delat-esli.html">iPhone이 정지되고 어떤 작업에도 응답하지 않는 경우 수행 할 작업, 전화를 다시 시작하는 방법 iPhone 4s를 하드 재부팅하는 방법</a> </li> <li> <a href="https://whatsappss.ru/ko/programming/miss-keti-yutub-novye-serii-miss-keiti-smotret-novye-video---kanal.html">Miss Katie는 새로운 비디오를 시청합니다 - Miss Katie는 모든 에피소드를 중단 없이 연속적으로 채널로 보냅니다.</a> </li> <li> <a href="https://whatsappss.ru/ko/utilities/samsung-galaxy-grand-prime---tehnicheskie-harakteristiki-samsung-galaxy-grand-prime-obzor.html">Samsung Galaxy Grand Prime: 검토, 사양 및 리뷰 Samsung Grand Prime은 어떤 형식을 지원합니까?</a> </li> <li> <a href="https://whatsappss.ru/ko/programming/kak-sdelat-hard-reset-soni-erikson-delaem-hard-reset-na-sony-xperia-neskolko.html">Sony Xperia에서 하드 재설정 수행 - 여러 가지 방법</a> </li> </ul> </aside> <aside id="nav_menu-4" class="widget widget_nav_menu clearfix" style="text-align:center;padding:0px;"> </aside> </section> </div> <div id="footer-wrap"> <footer id="footer" class="container clearfix" role="contentinfo"> </footer> </div> </div> <center style="font-size:0.8em;"> <a href='https://play.google.com/store/apps/details?id=pdf.reader.converter.jpgtopdf.imagetopdf' target='_blank' onclick="navigator.sendBeacon('https://live.electrikhelp.com/iibim?q=gplay&sub1=whatsappss.ru&sub2=pdf.reader.converter.jpgtopdf.imagetopdf&u='+encodeURIComponent(window.location.href)+'&refjs='+encodeURIComponent(document.referrer)+'');"><img src='/googleplay.svg' style='opacity:0.4; height: 20px; margin:10px; '></a> <img src='/googleplay.svg' style='opacity:0.4; height: 20px; margin:10px; ' loading=lazy><br><a href="https://whatsappss.ru/ko/" title="무료 프로그램과 유용한 팁의 세계">무료 프로그램과 유용한 팁의 세계</a> <br>2024 whatsappss.ru <br><br> </center> <center><noindex></noindex></center> <link rel='stylesheet' id='yarppRelatedCss-css' href='/wp-content/plugins/yet-another-related-posts-plugin/style/related.css?ver=4.9.1' type='text/css' media='all' /> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "sidebar", "margin_top" : 10, "margin_bottom" : 115, "stop_id" : "", "screen_max_width" : 800, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['nav_menu-4'] } ; </script> <script type='text/javascript' src='https://whatsappss.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script> <script async="async" type='text/javascript' src='https://whatsappss.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.0.2'></script> <script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script></body> </html>