자리 표시자 색상을 설정합니다. CSS 스타일을 사용하여 자리 표시자의 도구 설명 텍스트 색상을 변경하는 방법은 무엇입니까? 자리표시자를 아름답게 숨기기
일반적으로 입력 및 텍스트 영역의 자리 표시자 속성은 해당 요소 내에서 작업 호출을 제공하는 데 사용됩니다. 이 노트에서는 자리 표시자의 텍스트 스타일을 지정하는 몇 가지 옵션과 해당 애니메이션 옵션에 대해 설명합니다.
따라서 자리 표시자의 텍스트 색상은 예를 들어 다음 CSS 규칙 세트를 사용하여 변경할 수 있습니다.
::-webkit-input-placeholder ( color : #c0392b ;) ::-moz-placeholder ( color : #c0392b ;) /* Firefox 19+ */ :-moz-placeholder ( color : #c0392b ;) /* Firefox 18- */ :-ms-input-placeholder ( 색상 : #c0392b ;)
이러한 간단한 속성의 스타일을 지정하기 위한 코드 길이는 공통 표준이 없기 때문에 발생하므로 각 브라우저는 자체 방식으로 자리 표시자 스타일 지정에 대한 지원을 구현했습니다.
또한 일부는 지원되지 않습니다. CSS 속성. 정확히 지원되는 속성 목록은 다음과 같습니다.
글꼴(및 관련)
배경(및 관련)
색상
단어 간격
문자 간격
텍스트 장식
수직 정렬
텍스트 변환
선 높이
텍스트 들여쓰기
텍스트 오버플로
불투명
또한 자리 표시자 텍스트가 입력 또는 텍스트 영역 요소의 너비를 넘어 "확장"되는 경우도 있습니다(일반적인 경우). 모바일 장치). 동시에 보기 흉하게 자동으로 절단됩니다.
text-overflow: ellipsis와 같은 CSS 속성은 이 문제를 해결하는 데 도움이 되며, 자리 표시자의 잘린 영역에 미적인 줄임표를 추가합니다. 스타일에서는 다음과 같이 작성합니다.
입력 [ 자리 표시자 ] ( 텍스트 오버플로 : 줄임표 ;) 입력 ::-moz-placeholder ( 텍스트 오버플로 : 줄임표 ;) 입력 :-moz-placeholder ( 텍스트 오버플로 : 줄임표 ;) 입력 :-ms-input-placeholder ( 텍스트 오버플로: 줄임표 ;)
자리 표시자에 더 많은 미학을 추가하려면 해당 요소가 포커스를 받을 때 숨기는 효과를 추가할 수 있습니다.
애니메이션 요소를 사용한 숨기기의 몇 가지 예:
/* 초점을 맞추면 자리 표시자 투명도가 부드럽게 변경됩니다 */.input ::-webkit-input-placeholder ( 불투명도 : 1 ; 전환 : 불투명도 0.3초 완화 ;) .input ::-moz-placeholder ( 불투명도 : 1 ; 전환 : 불투명도 0.3초 완화 ;).input :-moz- 자리 표시자(불투명도: 1; 전환: 불투명도 0.3초 완화;).input:-ms-input-placeholder (불투명도: 1; 전환: 불투명도 0.3초 완화;).input(불투명도: 0; 전환: 불투명도 0.3초 완화; ) .input :focus::-moz-placeholder ( 불투명도 : 0 ; 전환 : 불투명도 0.3초 완화 ;).input :focus:-moz-placeholder ( 불투명도 : 0 ; 전환 : 불투명도 0.3초 완화 ;).input :focus :-ms-input-placeholder ( 불투명도 : 0 ; 전환 : 불투명도 0.3초 용이성 ;) /* 초점이 맞춰지면 자리 표시자를 오른쪽으로 이동합니다 */.input ::-webkit-input-placeholder ( text-indent : 0px ; 전환 : text-indent 0.3초 용이성 ;) .input ::-moz-placeholder ( text-indent : 0px ; 전환 : text-indent 0.3초 용이성 ;).input :-moz-placeholder ( text-indent : 0px ; 전환 : 텍스트 들여쓰기 0.3초 용이성 ;).input :-ms-input-placeholder ( text-indent : 0px ; 전환 : 텍스트 들여쓰기 0.3초 용이성 ;).입력 :focus::-webkit-입력-자리 표시자( 텍스트 들여쓰기 : 500px ; 전환 : 텍스트 들여쓰기 0.3초 완화 ;).input :focus::-moz-placeholder ( 텍스트 들여쓰기 : 500px ; 전환 : 텍스트 들여쓰기 0.3초 완화 ;).input :focus:- moz-placeholder ( text-indent : 500px ; 전환 : text-indent 0.3초 용이함 ;) .input :focus:-ms-input-placeholder ( text-indent : 500px ; 전환 : text-indent 0.3초 용이함 ;) /* 초점이 맞춰지면 자리 표시자를 아래로 이동합니다 */.input ::-webkit-input-placeholder ( line-height : 20px ; 전환 : line-height 0.5s 용이성 ;) .input ::-moz-placeholder ( line-height : 20px ; 전환 : line-height 0.5s 용이성 ;).input :-moz-placeholder ( line-height : 20px ; 전환 : line-height 0.5초 용이성 ;).input :-ms-input-placeholder ( line-height : 20px ; 전환 : line-height 0.5초 용이성 ;).입력 :focus::-webkit-입력-자리 표시자( line-height : 100px ; 전환 : line-height 0.5초 완화 ;).input :focus::-moz-placeholder ( line-height : 100px ; 전환 : line-height 0.5초 완화 ;).input :focus:- moz-placeholder ( line-height : 100px ; 전환 : line-height 0.5s 여유 ;).input :focus:-ms-input-placeholder ( line-height : 100px ; 전환 : line-height 0.5s 여유 ;)
여기서 마치겠습니다.
모양을 줄이고 시각적 노이즈를 줄이기 위한 노력의 일환으로 디자이너는
심하게
괜찮은
스타일 지정: 자리 표시자 색상 변경 CSS
자리 표시자 CSS를 사용하여 입력 필드 스타일 변경
심하게
다음에 대한 자리표시자 효과
자리 표시자 속성은 다음에서만 작동합니다. 그리고
자바스크립트의 가치를 바꾸는 고대의 기억법
안녕하세요, 오늘은 자리 표시자를 입력에 사용하는 사람을 놀라게 하지 않을 것입니다. 자리 표시자는 텍스트를 입력하면 사라지는 입력 내부에 예시가 포함된 임시 텍스트입니다. 오늘은 자리 표시자에 대한 CSS 스타일을 작성해 보겠습니다.
작업: 자리표시자를 위한 자신만의 CSS 스타일 만들기
입력에 자리 표시자를 사용하는 세련된 웹사이트가 있다고 가정해 보겠습니다. 자리 표시자의 회색의 지루한 텍스트 스타일을 사이트의 일반적인 스타일과 일관되게 보이게 만들어야 합니다. 이것이 어떻게 달성될 수 있습니까? 아직 모든 브라우저에서 작동하지 않는다고 즉시 말씀 드리겠습니다. 특히 IE 버전 9 이하에서는 전혀 작동하지 않으며 10 이상에서는 여전히 큰 어려움을 겪고 있습니다. Firefox와 웹킷 브라우저는 또 다른 문제입니다.
해결 방법: 자리표시자의 CSS 스타일
자, 과제를 정했는데, 어떻게 해결할까요?
먼저 테스트 그라운드를 만들어 보겠습니다.
완료했습니다. 이제 스타일로 무엇을 할 수 있는지 살펴보겠습니다. webkit과 mozilla에는 자리 표시자에 특별한 스타일을 할당할 수 있는 고유한 수정자가 있습니다: ::-webkit-input-placeholder 및:-moz-placeholder. 사용 방법을 살펴보겠습니다.
입력 자체의 스타일과 그 안의 텍스트를 설명하겠습니다(예제에서는 대비를 위해 파란색).
입력(너비: 250px; 색상: 파란색; 글꼴 두께: 일반; 글꼴 스타일: 일반; )
이제 Webkit 브라우저(Chrome, Safari, Opera)에 대한 이 입력에서 자리 표시자 텍스트에 대한 특수 스타일을 작성해 보겠습니다.
입력::-webkit-input-placeholder( 색상: 빨간색; 글꼴 스타일: 기울임꼴; 글꼴 두께: 굵게; )
자리 표시자 텍스트를 빨간색 굵은 이탤릭체로 만들어 보겠습니다. 단일 콜론으로 구분되는 다른 CSS 의사 클래스와 달리 웹킷의 자리 표시자 스타일은 이중 콜론으로 구분됩니다.
이제 정확히 동일한 스타일을 작성해 보겠습니다. 모질라 파이어폭스브라우저:
입력:-moz-placeholder( 색상: 빨간색; 글꼴 스타일: 기울임꼴; 글꼴 두께: 굵게; )
준비가 된. 자리 표시자를 위한 CSS 스타일은 물론 디자인에 더 적합한 스타일을 작성할 수 있습니다. 작업 데모는 다음에서 볼 수 있습니다.
자리 표시자 속성은 빈 입력 및 텍스트 영역 요소 내의 작업 호출에 사용됩니다. 이 기사에서는 위치 지정자 텍스트의 스타일 지정 가능성과 이를 더욱 편리하고 기능적으로 만드는 몇 가지 요령을 살펴보겠습니다.
그럼, 자리 표시자가 무엇인지 모르는 사람들을 위한 예부터 시작하겠습니다.
HTML
자리 표시자의 스타일은 다음 CSS 규칙 세트를 사용하여 변경할 수 있습니다.
CSS
::-webkit-input-placeholder (색상:#c0392b;) ::-moz-placeholder (색상:#c0392b;)/* Firefox 19+ */ :-moz-placeholder (색상:#c0392b;)/* Firefox 18- */ :-ms-input-placeholder (색상:#c0392b;) 무서운 것 같지 않나요? 사실은 이것이 아직 표준에 포함되지 않았다는 것입니다. 각 브라우저는 고유한 방식으로 자리 표시자 스타일 지원을 구현합니다.
IE 및 이전 Firefox(18 이전)에서는 자리 표시자가 의사 클래스로 간주되고, 새로운 Firefox, 웹킷 및 깜박임에서는 의사 요소로 간주됩니다.
무슨 일이 일어났는지 봅시다:
가능한 모든 CSS 속성이 지원되는 것은 아닙니다. 다수 최신 브라우저다음을 변경할 수 있습니다.
- 글꼴(및 관련 속성)
- 배경(및 관련 속성)
- 색상
- 단어 간격
- 문자 간격
- 텍스트 장식
- 수직 정렬
- 텍스트 변환
- 선 높이
- 텍스트 들여쓰기
- 텍스트 오버플로
- 불투명
자리 표시자가 맞지 않으면 어떻게 되나요?
레이아웃 기능으로 인해 텍스트 입력 필드의 너비가 줄어드는 경우가 있습니다. 특히 모바일 장치. 이 경우 자리 표시자의 긴 텍스트가 보기 흉하게 잘립니다. 이를 방지하려면 text-overflow: ellipsis를 사용할 수 있습니다. 이 구문은 모든 새 브라우저에서 작동합니다.
CSS
입력(텍스트 오버플로:줄임표;) 입력::-moz-placeholder(텍스트-오버플로:줄임표;) 입력:-moz-자리 표시자(텍스트-오버플로:줄임표;) 입력:-ms-input-자리 표시자(텍스트 오버플로 :생략;) 초점이 맞춰진 자리 표시자를 숨기는 방법은 무엇입니까?
자리 표시자를 숨기는 방법은 다양합니다.
- 일부 브라우저에서 입력으로 포커스를 받을 때
- 다른 브라우저에서 하나 이상의 문자가 입력된 경우
나는 첫 번째 옵션을 더 좋아합니다. 자리 표시자를 지원하는 모든 브라우저에서 이 동작을 설정하기 위해 다음 CSS 규칙을 정의합니다.
CSS
:focus::-webkit-input-placeholder (색상: 투명) :focus::-moz-placeholder (색상: 투명) :focus:-moz-placeholder (색상: 투명) :focus:-ms-input-placeholder ( 색상: 투명) 자리표시자를 아름답게 숨기기
자리 표시자를 표시하거나 숨기기 위해 전환을 추가할 수도 있습니다.
CSS
/* 초점이 맞춰지면 자리 표시자 투명도가 부드럽게 변경됨 */ .input1::-webkit-input-placeholder (불투명도: 1; 전환: 불투명도 0.3초 용이함;) .input1::-moz-placeholder (불투명도: 1; 전환: 불투명도 0.3초 용이함;).input1:-moz-placeholder (불투명도: 1; 전환: 불투명도 0.3초 용이함;).input1:-ms-input-placeholder (불투명도: 1; 전환: 불투명도 0.3초 용이함;).input1 : focus::-webkit-input-placeholder (불투명도: 0; 전환: 불투명도 0.3초 완화;).input1:focus::-moz-placeholder (불투명도: 0; 전환: 불투명도 0.3초 완화;).input1:focus: -moz-placeholder (불투명도: 0; 전환: 불투명도 0.3초 완화;) .input1:focus:-ms-input-placeholder (불투명도: 0; 전환: 불투명도 0.3초 완화;) /* 다음과 같은 경우 자리 표시자를 오른쪽으로 이동합니다. focus*/ .input2::-webkit-input-placeholder (텍스트 들여쓰기: 0px; 전환: 텍스트 들여쓰기 0.3초 용이성;) .input2::-moz-placeholder (텍스트 들여쓰기: 0px; 전환: 텍스트 들여쓰기 0.3초 용이함;) .input2:-moz-placeholder (텍스트 들여쓰기: 0px; 전환: 텍스트 들여쓰기 0.3초 용이함;).input2:-ms-input-placeholder (텍스트 들여쓰기: 0px; 전환: 텍스트 들여쓰기 0.3초 용이성;).input2:focus::-webkit-input-placeholder (텍스트 들여쓰기: 500px; 전환: 텍스트 들여쓰기 0.3초 용이성;).input2:focus::-moz-placeholder ( 텍스트 들여쓰기: 500px; 전환: 텍스트 들여쓰기 0.3초 완화;).input2:focus:-moz-placeholder (텍스트 들여쓰기: 500px; 전환: 텍스트 들여쓰기 0.3초 완화;).input2:focus:-ms- input-placeholder (text-indent: 500px; 전환: text-indent 0.3s easy;) /* 초점이 맞춰지면 자리 표시자를 아래로 이동합니다 */ .input3::-webkit-input-placeholder (line-height: 20px; 전환: line -height 0.5s 여유;).input3::-moz-placeholder (line-height: 20px; 전환: line-height 0.5s 여유;).input3:-moz-placeholder (line-height: 20px; 전환: line - 높이 0.5초 용이함;).input3:-ms-input-placeholder (줄 높이: 20px; 전환: 줄 높이 0.5초 용이함;).input3:focus::-webkit-input-placeholder (줄 높이: 100px ; 전환: 줄 높이 0.5초 완화;).input3:focus::-moz-placeholder (줄 높이: 100px; 전환: 줄 높이 0.5초 완화;).input3:focus:-moz-placeholder (줄 - 높이: 100px; 전환: 줄 높이 0.5초 완화;) .input3:focus:-ms-input-placeholder (줄 높이: 100px; 전환: 줄 높이 0.5초 완화;) 이 정보가 도움이 되기를 바랍니다. 댓글에 의견과 제안을 적어주세요.
자리 표시자는 필드 이름 표시를 담당하는 의사 클래스 또는 의사 요소입니다. 핵심은 단어를 입력하면 사용자가 그 내용을 볼 수 있는 태그(간단히 설명하기 위해 그렇게 부르겠습니다)입니다. 각 양식 필드에 대한 일종의 힌트 또는 이름입니다.
각 브라우저는 이 태그를 다르게 처리하며 스타일이 많이 부족합니다. 기본 스타일을 변경하려면 스타일 파일에 몇 줄의 코드를 추가하기만 하면 됩니다. 복잡한 것은 없습니다.
그러나 우리가 모든 것을 바꿀 수는 없다는 점을 고려해야 합니다.
다양한 스타일 중에서 이 경우 다음 사항을 사용할 수 있습니다.
- 글꼴 무게 — 텍스트 두께 설정
- 글꼴 크기 — 텍스트 크기 선택
- 글꼴 계열 - 글꼴 선택
- 배경 - 배경 및 배경 이미지
- 색상 - 텍스트 색상
- word-spacing - 단어 사이의 간격을 설정합니다.
- letter-spacing - 글자 사이의 간격을 설정합니다.
- 텍스트 장식 — 단어 장식 선택. 밑줄, 줄 그음 등
- 수직 정렬 — 수직 정렬 설정
- text-transform - 텍스트 변경 선택. 모두 대문자, 소문자 등입니다.
- line-height — 줄 사이의 간격
- text-indent - 단락의 첫 번째 줄에 왼쪽 들여쓰기를 설정합니다.
- text-overflow - 블록에 맞지 않는 텍스트 표시 선택(숨기기 또는 자르기 및 줄임표 추가)
- 불투명도 - 요소 투명도 선택
이제 사용 가능한 스타일을 이해했으므로 디자인을 시작할 수 있습니다. 이를 위해 다음 스타일을 추가합니다.
::-webkit-input-placeholder ( 색상: #2cb04d; )
::-moz-placeholder ( color: #2cb04d; )/* Firefox 19+ */
:-moz-placeholder ( color: #2cb04d; ) /*Firefox 18- */
:-ms-input-placeholder(색상: #2cb04d; )
이 줄을 추가하면 양식 필드 내부의 이름 색상이 변경되고 각 브라우저에서 동일하게 됩니다. 여기에 추가 스타일을 추가할 수 있습니다.
예를 들어 이런 스타일
::-webkit-input-placeholder (색상: #2cb04d; 글꼴 크기: 1.5em; 글꼴 두께: 600;)
::-moz-placeholder (색상:#2cb04d; 글꼴 크기:1.5em; 글꼴 무게:600;) /*Firefox 19+*/
:-moz-placeholder (색상:#2cb04d; 글꼴 크기:1.5em; 글꼴 무게:600;) /*Firefox 18-*/
:-ms-input-placeholder (색상: #2cb04d; 글꼴 크기: 1.5em; 글꼴 두께: 600;)
색상 추가 대판중간 텍스트 무게. 추가 속성을 추가하는 경우 -
text-overflow:ellipsis 그러면 텍스트가 필드에 맞게 잘리고 끝에 줄임표가 추가됩니다.
흥미로운 속성이 하나 더 있습니다. CSS(스타일)의 애니메이션 모양 덕분에 필드에 커서를 놓을 때 아름다운 숨김을 구성할 수 있습니다. 이전에는 js(스크립트)를 사용하여 이 작업을 수행했습니다.
입력::-webkit-input-placeholder (불투명도: 1; 전환: 불투명도 0.3초 용이성;)
.input::-moz-placeholder (불투명도: 1; 전환: 불투명도 0.3초 용이성;)
.input:-moz-placeholder (불투명도: 1; 전환: 불투명도 0.3초 용이성;)
.input:-ms-input-placeholder (불투명도: 1; 전환: 불투명도 0.3초 용이성;)
.input:focus::-webkit-input-placeholder (불투명도: 0; 전환: 불투명도 0.3초 용이성;)
.input:focus::-moz-placeholder (불투명도: 0; 전환: 불투명도 0.3초 용이성;)
.input:focus:-moz-placeholder (불투명도: 0; 전환: 불투명도 0.3초 용이성;)
.input:focus:-ms-input-placeholder (불투명도: 0; 전환: 불투명도 0.3초 완화;)
이러한 스타일을 추가하면 커서가 필드에 위치할 때 자리 표시자가 부드럽게 사라지게 됩니다.
.input은 양식 요소 클래스입니다. 스타일이 작동하려면 양식 필드 코드가 다음과 같아야 합니다.
또는 요소 클래스를 사용할 수 있습니다. 이렇게 하면 각 양식에 대해 서로 다른 스타일을 설정할 수 있습니다.
.contacts-form 양식 입력::-webkit-input-placeholder (색상: #2cb04d; 글꼴 크기: 1.5em; 글꼴 두께: 600;)
.contacts-form 양식 입력::-moz-placeholder (색상: #2cb04d; 글꼴 크기: 1.5em; 글꼴 두께: 600;)/*Firefox 19+*/
.contacts-form 양식 입력:-moz-placeholder (색상: #2cb04d; 글꼴 크기: 1.5em; 글꼴 두께: 600;)/*Firefox 18-*/
.연락처 양식 입력:-ms-input-placeholder (색상: #2cb04d; 글꼴 크기: 1.5em; 글꼴 두께: 600;)
이러한 간단한 방법으로 정말 아름다운 형태의 디자인을 만들 수 있습니다.
자리 표시자 속성은 다음에서만 작동합니다. 그리고
자바스크립트의 가치를 바꾸는 고대의 기억법
안녕하세요, 오늘은 자리 표시자를 입력에 사용하는 사람을 놀라게 하지 않을 것입니다. 자리 표시자는 텍스트를 입력하면 사라지는 입력 내부에 예시가 포함된 임시 텍스트입니다. 오늘은 자리 표시자에 대한 CSS 스타일을 작성해 보겠습니다.
작업: 자리표시자를 위한 자신만의 CSS 스타일 만들기
입력에 자리 표시자를 사용하는 세련된 웹사이트가 있다고 가정해 보겠습니다. 자리 표시자의 회색의 지루한 텍스트 스타일을 사이트의 일반적인 스타일과 일관되게 보이게 만들어야 합니다. 이것이 어떻게 달성될 수 있습니까? 아직 모든 브라우저에서 작동하지 않는다고 즉시 말씀 드리겠습니다. 특히 IE 버전 9 이하에서는 전혀 작동하지 않으며 10 이상에서는 여전히 큰 어려움을 겪고 있습니다. Firefox와 웹킷 브라우저는 또 다른 문제입니다.
해결 방법: 자리표시자의 CSS 스타일
자, 과제를 정했는데, 어떻게 해결할까요?
먼저 테스트 그라운드를 만들어 보겠습니다.
완료했습니다. 이제 스타일로 무엇을 할 수 있는지 살펴보겠습니다. webkit과 mozilla에는 자리 표시자에 특별한 스타일을 할당할 수 있는 고유한 수정자가 있습니다: ::-webkit-input-placeholder 및:-moz-placeholder. 사용 방법을 살펴보겠습니다.
입력 자체의 스타일과 그 안의 텍스트를 설명하겠습니다(예제에서는 대비를 위해 파란색).
입력(너비: 250px; 색상: 파란색; 글꼴 두께: 일반; 글꼴 스타일: 일반; )
이제 Webkit 브라우저(Chrome, Safari, Opera)에 대한 이 입력에서 자리 표시자 텍스트에 대한 특수 스타일을 작성해 보겠습니다.
입력::-webkit-input-placeholder( 색상: 빨간색; 글꼴 스타일: 기울임꼴; 글꼴 두께: 굵게; )
자리 표시자 텍스트를 빨간색 굵은 이탤릭체로 만들어 보겠습니다. 단일 콜론으로 구분되는 다른 CSS 의사 클래스와 달리 웹킷의 자리 표시자 스타일은 이중 콜론으로 구분됩니다.
이제 정확히 동일한 스타일을 작성해 보겠습니다. 모질라 파이어폭스브라우저:
입력:-moz-placeholder( 색상: 빨간색; 글꼴 스타일: 기울임꼴; 글꼴 두께: 굵게; )
준비가 된. 자리 표시자를 위한 CSS 스타일은 물론 디자인에 더 적합한 스타일을 작성할 수 있습니다. 작업 데모는 다음에서 볼 수 있습니다.
자리 표시자 속성은 빈 입력 및 텍스트 영역 요소 내의 작업 호출에 사용됩니다. 이 기사에서는 위치 지정자 텍스트의 스타일 지정 가능성과 이를 더욱 편리하고 기능적으로 만드는 몇 가지 요령을 살펴보겠습니다.
그럼, 자리 표시자가 무엇인지 모르는 사람들을 위한 예부터 시작하겠습니다.
HTML
자리 표시자의 스타일은 다음 CSS 규칙 세트를 사용하여 변경할 수 있습니다.
CSS
::-webkit-input-placeholder (색상:#c0392b;) ::-moz-placeholder (색상:#c0392b;)/* Firefox 19+ */ :-moz-placeholder (색상:#c0392b;)/* Firefox 18- */ :-ms-input-placeholder (색상:#c0392b;)무서운 것 같지 않나요? 사실은 이것이 아직 표준에 포함되지 않았다는 것입니다. 각 브라우저는 고유한 방식으로 자리 표시자 스타일 지원을 구현합니다.
IE 및 이전 Firefox(18 이전)에서는 자리 표시자가 의사 클래스로 간주되고, 새로운 Firefox, 웹킷 및 깜박임에서는 의사 요소로 간주됩니다.
무슨 일이 일어났는지 봅시다:
가능한 모든 CSS 속성이 지원되는 것은 아닙니다. 다수 최신 브라우저다음을 변경할 수 있습니다.
- 글꼴(및 관련 속성)
- 배경(및 관련 속성)
- 색상
- 단어 간격
- 문자 간격
- 텍스트 장식
- 수직 정렬
- 텍스트 변환
- 선 높이
- 텍스트 들여쓰기
- 텍스트 오버플로
- 불투명
자리 표시자가 맞지 않으면 어떻게 되나요?
레이아웃 기능으로 인해 텍스트 입력 필드의 너비가 줄어드는 경우가 있습니다. 특히 모바일 장치. 이 경우 자리 표시자의 긴 텍스트가 보기 흉하게 잘립니다. 이를 방지하려면 text-overflow: ellipsis를 사용할 수 있습니다. 이 구문은 모든 새 브라우저에서 작동합니다.
CSS
입력(텍스트 오버플로:줄임표;) 입력::-moz-placeholder(텍스트-오버플로:줄임표;) 입력:-moz-자리 표시자(텍스트-오버플로:줄임표;) 입력:-ms-input-자리 표시자(텍스트 오버플로 :생략;)초점이 맞춰진 자리 표시자를 숨기는 방법은 무엇입니까?
자리 표시자를 숨기는 방법은 다양합니다.
- 일부 브라우저에서 입력으로 포커스를 받을 때
- 다른 브라우저에서 하나 이상의 문자가 입력된 경우
나는 첫 번째 옵션을 더 좋아합니다. 자리 표시자를 지원하는 모든 브라우저에서 이 동작을 설정하기 위해 다음 CSS 규칙을 정의합니다.
CSS
:focus::-webkit-input-placeholder (색상: 투명) :focus::-moz-placeholder (색상: 투명) :focus:-moz-placeholder (색상: 투명) :focus:-ms-input-placeholder ( 색상: 투명)자리표시자를 아름답게 숨기기
자리 표시자를 표시하거나 숨기기 위해 전환을 추가할 수도 있습니다.
CSS
/* 초점이 맞춰지면 자리 표시자 투명도가 부드럽게 변경됨 */ .input1::-webkit-input-placeholder (불투명도: 1; 전환: 불투명도 0.3초 용이함;) .input1::-moz-placeholder (불투명도: 1; 전환: 불투명도 0.3초 용이함;).input1:-moz-placeholder (불투명도: 1; 전환: 불투명도 0.3초 용이함;).input1:-ms-input-placeholder (불투명도: 1; 전환: 불투명도 0.3초 용이함;).input1 : focus::-webkit-input-placeholder (불투명도: 0; 전환: 불투명도 0.3초 완화;).input1:focus::-moz-placeholder (불투명도: 0; 전환: 불투명도 0.3초 완화;).input1:focus: -moz-placeholder (불투명도: 0; 전환: 불투명도 0.3초 완화;) .input1:focus:-ms-input-placeholder (불투명도: 0; 전환: 불투명도 0.3초 완화;) /* 다음과 같은 경우 자리 표시자를 오른쪽으로 이동합니다. focus*/ .input2::-webkit-input-placeholder (텍스트 들여쓰기: 0px; 전환: 텍스트 들여쓰기 0.3초 용이성;) .input2::-moz-placeholder (텍스트 들여쓰기: 0px; 전환: 텍스트 들여쓰기 0.3초 용이함;) .input2:-moz-placeholder (텍스트 들여쓰기: 0px; 전환: 텍스트 들여쓰기 0.3초 용이함;).input2:-ms-input-placeholder (텍스트 들여쓰기: 0px; 전환: 텍스트 들여쓰기 0.3초 용이성;).input2:focus::-webkit-input-placeholder (텍스트 들여쓰기: 500px; 전환: 텍스트 들여쓰기 0.3초 용이성;).input2:focus::-moz-placeholder ( 텍스트 들여쓰기: 500px; 전환: 텍스트 들여쓰기 0.3초 완화;).input2:focus:-moz-placeholder (텍스트 들여쓰기: 500px; 전환: 텍스트 들여쓰기 0.3초 완화;).input2:focus:-ms- input-placeholder (text-indent: 500px; 전환: text-indent 0.3s easy;) /* 초점이 맞춰지면 자리 표시자를 아래로 이동합니다 */ .input3::-webkit-input-placeholder (line-height: 20px; 전환: line -height 0.5s 여유;).input3::-moz-placeholder (line-height: 20px; 전환: line-height 0.5s 여유;).input3:-moz-placeholder (line-height: 20px; 전환: line - 높이 0.5초 용이함;).input3:-ms-input-placeholder (줄 높이: 20px; 전환: 줄 높이 0.5초 용이함;).input3:focus::-webkit-input-placeholder (줄 높이: 100px ; 전환: 줄 높이 0.5초 완화;).input3:focus::-moz-placeholder (줄 높이: 100px; 전환: 줄 높이 0.5초 완화;).input3:focus:-moz-placeholder (줄 - 높이: 100px; 전환: 줄 높이 0.5초 완화;) .input3:focus:-ms-input-placeholder (줄 높이: 100px; 전환: 줄 높이 0.5초 완화;)이 정보가 도움이 되기를 바랍니다. 댓글에 의견과 제안을 적어주세요.
자리 표시자는 필드 이름 표시를 담당하는 의사 클래스 또는 의사 요소입니다. 핵심은 단어를 입력하면 사용자가 그 내용을 볼 수 있는 태그(간단히 설명하기 위해 그렇게 부르겠습니다)입니다. 각 양식 필드에 대한 일종의 힌트 또는 이름입니다.
각 브라우저는 이 태그를 다르게 처리하며 스타일이 많이 부족합니다. 기본 스타일을 변경하려면 스타일 파일에 몇 줄의 코드를 추가하기만 하면 됩니다. 복잡한 것은 없습니다.
그러나 우리가 모든 것을 바꿀 수는 없다는 점을 고려해야 합니다.
다양한 스타일 중에서 이 경우 다음 사항을 사용할 수 있습니다.
- 글꼴 무게 — 텍스트 두께 설정
- 글꼴 크기 — 텍스트 크기 선택
- 글꼴 계열 - 글꼴 선택
- 배경 - 배경 및 배경 이미지
- 색상 - 텍스트 색상
- word-spacing - 단어 사이의 간격을 설정합니다.
- letter-spacing - 글자 사이의 간격을 설정합니다.
- 텍스트 장식 — 단어 장식 선택. 밑줄, 줄 그음 등
- 수직 정렬 — 수직 정렬 설정
- text-transform - 텍스트 변경 선택. 모두 대문자, 소문자 등입니다.
- line-height — 줄 사이의 간격
- text-indent - 단락의 첫 번째 줄에 왼쪽 들여쓰기를 설정합니다.
- text-overflow - 블록에 맞지 않는 텍스트 표시 선택(숨기기 또는 자르기 및 줄임표 추가)
- 불투명도 - 요소 투명도 선택
이제 사용 가능한 스타일을 이해했으므로 디자인을 시작할 수 있습니다. 이를 위해 다음 스타일을 추가합니다.
::-webkit-input-placeholder ( 색상: #2cb04d; )
::-moz-placeholder ( color: #2cb04d; )/* Firefox 19+ */
:-moz-placeholder ( color: #2cb04d; ) /*Firefox 18- */
:-ms-input-placeholder(색상: #2cb04d; )
이 줄을 추가하면 양식 필드 내부의 이름 색상이 변경되고 각 브라우저에서 동일하게 됩니다. 여기에 추가 스타일을 추가할 수 있습니다.
예를 들어 이런 스타일
::-webkit-input-placeholder (색상: #2cb04d; 글꼴 크기: 1.5em; 글꼴 두께: 600;)
::-moz-placeholder (색상:#2cb04d; 글꼴 크기:1.5em; 글꼴 무게:600;) /*Firefox 19+*/
:-moz-placeholder (색상:#2cb04d; 글꼴 크기:1.5em; 글꼴 무게:600;) /*Firefox 18-*/
:-ms-input-placeholder (색상: #2cb04d; 글꼴 크기: 1.5em; 글꼴 두께: 600;)
색상 추가 대판중간 텍스트 무게. 추가 속성을 추가하는 경우 -
text-overflow:ellipsis 그러면 텍스트가 필드에 맞게 잘리고 끝에 줄임표가 추가됩니다.
흥미로운 속성이 하나 더 있습니다. CSS(스타일)의 애니메이션 모양 덕분에 필드에 커서를 놓을 때 아름다운 숨김을 구성할 수 있습니다. 이전에는 js(스크립트)를 사용하여 이 작업을 수행했습니다.
입력::-webkit-input-placeholder (불투명도: 1; 전환: 불투명도 0.3초 용이성;)
.input::-moz-placeholder (불투명도: 1; 전환: 불투명도 0.3초 용이성;)
.input:-moz-placeholder (불투명도: 1; 전환: 불투명도 0.3초 용이성;)
.input:-ms-input-placeholder (불투명도: 1; 전환: 불투명도 0.3초 용이성;)
.input:focus::-webkit-input-placeholder (불투명도: 0; 전환: 불투명도 0.3초 용이성;)
.input:focus::-moz-placeholder (불투명도: 0; 전환: 불투명도 0.3초 용이성;)
.input:focus:-moz-placeholder (불투명도: 0; 전환: 불투명도 0.3초 용이성;)
.input:focus:-ms-input-placeholder (불투명도: 0; 전환: 불투명도 0.3초 완화;)
이러한 스타일을 추가하면 커서가 필드에 위치할 때 자리 표시자가 부드럽게 사라지게 됩니다.
.input은 양식 요소 클래스입니다. 스타일이 작동하려면 양식 필드 코드가 다음과 같아야 합니다.
또는 요소 클래스를 사용할 수 있습니다. 이렇게 하면 각 양식에 대해 서로 다른 스타일을 설정할 수 있습니다.
.contacts-form 양식 입력::-webkit-input-placeholder (색상: #2cb04d; 글꼴 크기: 1.5em; 글꼴 두께: 600;)
.contacts-form 양식 입력::-moz-placeholder (색상: #2cb04d; 글꼴 크기: 1.5em; 글꼴 두께: 600;)/*Firefox 19+*/
.contacts-form 양식 입력:-moz-placeholder (색상: #2cb04d; 글꼴 크기: 1.5em; 글꼴 두께: 600;)/*Firefox 18-*/
.연락처 양식 입력:-ms-input-placeholder (색상: #2cb04d; 글꼴 크기: 1.5em; 글꼴 두께: 600;)
이러한 간단한 방법으로 정말 아름다운 형태의 디자인을 만들 수 있습니다.