ATOZ CSS 빠른 팁 : 자리 표시 자 텍스트

이 기사는 ATOZ CSS 시리즈의 일부입니다. 여기에서 시리즈의 다른 항목을 찾을 수 있습니다. 해당 비디오 의사 요소의 전체 텍스트 및 스크린 샷을 볼 수 있습니다.

ATOZ CSS 시리즈에 오신 것을 환영합니다! 이 시리즈에서는 알파벳의 다른 글자로 시작하는 다양한 CSS 값 (및 속성)을 탐색 할 것입니다. 우리는 때때로 스크린 샷이 충분하지 않다는 것을 알고 있으므로이 기사에서는 스타일 자리 표시 자 텍스트에 새로운 팁을 추가했습니다.

P는 자리 표시 자 텍스트 를 나타냅니다 pseudo elements 및

는 비 규모의 요소로 마크 업을 엉망으로 만들지 않고 복잡한 디자인 기능을 구축하는 데 이상적입니다. 및 와 같은 다른 의사 요소를 통해 HTML 문서에서 표시되지 않은 요소 스타일에 액세스 할 수 있습니다.

우리는 의사 요소 스크린 샷에서 이것들을 많이 보았지만, 우리가 보지 못한 의사 요소는 자리 표시 자 텍스트의 스타일이었습니다. 이 문제를 해결합시다.

입력 자리 표시자를 선택하십시오 먼저, 다음 html을 상상해 봅시다 : 우리는 아래와 같이 입력 텍스트의 색상을 빨간색으로 설정할 수 있습니다. 자리 표시 자 속성에 따라 입력 스타일을 선택하고 설정할 수도 있습니다.

그러나 이것은 자리 표시 자 텍스트 자체의 모양을 설정하는 대신 입력 필드에 입력 된 user input

텍스트를 여전히 스타일링합니다. 이를 위해서는 자리 표시 자 의사 요소를위한 일련의 공급 업체 접두사 선택기가 필요합니다. :before :after 이것은 반복처럼 보이지만 불행히도 더 이상 간결하지 않은 (자신을 반복하지 마십시오) 방법은 없습니다. :first-line 다음 방법은 유효하지 않습니다 :first-letter 이것은 브라우저가 쉼표로 구분 된 시리즈의 각 선택기를 "이해"할 수 있어야합니다.

sass 로 자리 표시 자 스타일을 설정하십시오 이 중복 CSS를 해결하는 한 가지 방법은 SASS 하이브리드 매크로를 사용하는 것입니다. 이것이 제가 프로젝트의 99%에서 사용하는 것입니다.

이를 통해 단일 SASS

를 사용하여 모든 브라우저에서 자리 표시자를 스타일로 유지하여 코드를 더 짧고 유지 관리 할 수 ​​있도록 도와줍니다.

자리 표시 자 스타일을 설정할 때 특이성에주의를 기울이십시오
IE 브라우저에서 입력 한 스타일을 설정하면 자리 표시 자 텍스트에 대한 스타일이 무시할 수 있습니다.

IE 자리 표시 자 스타일의 특이성이 높아서 예상대로 나타납니다. 이것은

를 사용하는 경우 일 수도 있지만이 강력한 도구를 사용할 때주의하십시오.

<input class="name-field" type="text" placeholder="Enter your name">

자리 표시 자의 불투명도에주의를 기울이십시오 Firefox에서 자리 표시 자 텍스트의 기본 불투명도는 약 0.5이므로 자리 표시 자에서

를 설정하면 를 설정하지 않으면 색상이 어두워집니다.

정상화를 사용 하더라도이 항목은 귀하를 위해 재설정되지 않습니다. 완전히 불투명 한 자리 표시자가 프로젝트에 중요하다면이 팁을 명심하십시오!

CSS 자리 표시 자 텍스트 (FAQ)에 대한 FAQS CSS에서 자리 표시 자 텍스트의 색상을 변경하는 방법은 무엇입니까? opacity: 1 CSS에서 자리 표시 자 텍스트의 색상은 pseudo element를 사용하여 변경할 수 있습니다. 이 의사 요소를 사용하면 입력 또는 텍스트 영역 요소로 자리 표시 자 텍스트를 스타일로 만들 수 있습니다. 다음은 색상을 빨간색으로 변경하는 방법의 예입니다. color: red 브라우저 호환성이 중요하다는 것을 기억하십시오. Firefox의 경우

;

자리 표시 자 텍스트의 글꼴 크기를 변경할 수 있습니까?

예, 자리 표시 자 텍스트의 글꼴 크기를 변경할 수 있습니다. 색상을 변경하는 것과 마찬가지로

pseudo element를 사용하여 글꼴 크기를 변경할 수 있습니다. 예는 다음과 같습니다.

이것은 자리 표시 자 텍스트의 글꼴 크기를 18px로 변경합니다.

자리 표시 자 텍스트의 글꼴 스타일을 변경할 수 있습니까?

절대적으로, 자리 표시 자 텍스트의 글꼴 스타일을 변경할 수 있습니다. 이탤릭체, 대담하거나 원하는 다른 스타일로 만들 수 있습니다. 다음은 이탤릭체로 만드는 방법의 예입니다.

이것은 자리 표시 자 텍스트의 글꼴 스타일을 이탤릭체로 변경합니다. ::placeholder 자리 표시 자 텍스트의 불투명도를 변경할 수 있습니까?

예, 자리 표시 자 텍스트의 불투명도를 변경할 수 있습니다. CSS에서

<input class="name-field" type="text" placeholder="Enter your name">

속성을 ​​사용하여 수행 할 수 있습니다. 예는 다음과 같습니다.

이것은 자리 표시 자 텍스트의 불투명도를 0.5로 변경하여 반투명합니다. ::-moz-placeholder 자리 표시 자 텍스트에 배경색을 추가하는 방법은 무엇입니까? :-ms-input-placeholder 불행히도 자리 표시 자 텍스트에 배경색을 추가 할 수 없습니다. pseudo elements를 사용하면 자리 표시 자 텍스트의 색상, 글꼴 크기, 글꼴 스타일 및 불투명도 만 설정할 수 있습니다. ::-webkit-input-placeholder와 같은 다른 속성을 지원하지 않습니다.

자리 표시 자 텍스트에서 CSS 애니메이션을 사용할 수 있습니까?

아니요, 자리 표시 자 텍스트에서 CSS 애니메이션을 사용할 수 없습니다. pseudo elements는 CSS 애니메이션이나 전환을 지원하지 않습니다.

다른 자리 표시 자 스타일을 다른 방식으로 설정할 수 있습니까?

예, 다른 자리 표시 자 스타일을 다른 방식으로 설정할 수 있습니다. 각 입력 또는 텍스트 영역 요소에 대해 다른 클래스 또는 ID를 사용하면됩니다. 예는 다음과 같습니다. ::placeholder 이것은 클래스 "input1"빨간색의 입력에서 자리 표시 자 텍스트를, 클래스 "input2"blue가있는 입력의 자리 표시 자 텍스트를 만듭니다.

와 함께 의사 클래스를 사용할 수 있습니까? ::placeholder 아니요, ,

또는 :hover와 같은 의사 클래스를 사용할 수 없습니다. pseudo elements는 의사 클래스를 지원하지 않습니다. :active CSS를 사용하여 자리 표시 자 텍스트를 변경할 수 있습니까? :focus 아니요, CSS를 사용하여 자리 표시 자 텍스트를 변경할 수 없습니다. 자리 표시 자 텍스트의 내용은 HTML을 사용 하여만 변경할 수 있습니다. ::placeholder 에서 미디어 쿼리를 사용할 수 있습니까? ::placeholder 예,

에서 미디어 쿼리를 사용할 수 있습니다. 이를 통해 화면 크기 나 장치에 따라 자리 표시 자 텍스트를 다양한 방식으로 스타일링 할 수 있습니다. 예는 다음과 같습니다.

이것은 화면 너비가 600px 이하의 빨간색으로 화면의 자리 표시 자 텍스트의 색상을 변경합니다.

위 내용은 ATOZ CSS 빠른 팁 : 자리 표시 자 텍스트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!