자리 표시 자에있는 텍스트의 스타일 부분

Question

자리 표시 자 부분의 CSS 스타일 을 수정하고 싶습니다. 주의 모든 자리 표시 자이 아님.

내 자리 인 경우

: "경우 (예 : 뉴욕)"(뉴욕 예)

<label>Search:</label> 
<textarea placeholder="Where (example: New York)" required="required"> 
</textarea> 

는 난 단지 등의 기울임을 설정할 수 있습니까?

모든 자리 표시 자 here

Answer 1

당신은 자리의 역할과 의미가 무엇인지에 대해 생각 할 수 있습니다. 대부분의 UI 전문가는 동의합니다. 자리 표시자는 이 아니며 라벨입니다. 라벨 (예 : '검색')은 라벨이며 텍스트 영역 바깥에 있어야합니다. 자리 표시자는 견본 입력 또는 형식이 아닌 레이블이나 지시 사항으로 설계되었습니다. 자리 표시자를 레이블과 같은 방식으로 사용하는 경우 사용자가 입력을 시작하자마자 해당 정보가 사라집니다.

예를 들어, 전화 번호의 입력 필드에서 레이블은 "전화 번호"이고 자리 표시자는 "212-555-1234"일 수 있습니다. 귀하의 경우에는 "검색"이 레이블이어야하고 "갈색 여우"가 자리 표시 자 여야합니다. 전체 자리 표시 자 (기울임 꼴)를 만들려면 (왜?) 자리 표시 자 의사 요소를 사용하여 쉽게 할 수 있습니다.

Answer 2

예 (틱)을 보면 ...하지만 난 그것을 권하고 싶지 않다. 오히려 실제 자리 표시 자 속성보다 의사 요소의 접두사 부분을 '검색'

는 에서 일부 브라우저는 별도로 자리와 스타일에 :before 의사 요소를 사용할 수 있지만 을해야합니다 :

::-webkit-input-placeholder { 
 
    color: #ABABAB; 
 
    font-style: italic; 
 
} 
 
:-moz-placeholder { /* Firefox 18- */ 
 
    color: #ABABAB; 
 
    font-style: italic; 
 
} 
 
::-moz-placeholder { /* Firefox 19+ */ 
 
    color: #ABABAB; 
 
    font-style: italic; 
 
} 
 
:-ms-input-placeholder { 
 
    color: #ABABAB; 
 
    font-style: italic; 
 
} 
 
/* prepend the 'Search' prefix */ 
 
::-webkit-input-placeholder:before { 
 
    content: "Search "; 
 
    font-style: normal; 
 
} 
 
:-moz-placeholder:before { 
 
    content: "Search "; 
 
    font-style: normal; 
 
} 
 
::-moz-placeholder:before { 
 
    content: "Search "; 
 
    font-style: normal; 
 
} 
 
:-ms-input-placeholder:before { 
 
    content: "Search "; 
 
    font-style: normal; 
 
}

<textarea placeholder="(example: brown fox)" required="required"></textarea>

크롬에서 나를 위해

작품을하지만 귀하의 마일리지가 다를 수 있습니다. 나는 경우에 대비해 벤더 접두어를 추가했지만 다른 어떤 것으로는 테스트하지 않았습니다. 덧글에 언급 된대로 - 그것은 Firefox에서 작동하지 않으며 은 어디서나 작동하지 않아야합니다! 또한 실제로 프리젠 테이션 요소가 아니기 때문에 이러한 방식으로 자리 표시자를 스타일링하는 것은 좋지 않은 형식으로 간주되지만 사용자에게 예상되는 내용을 알려주는 일종의 도우미입니다.

더 나은 해결책은 자리 표시자를 테마에 맞게 글꼴/색상을 지정하는 것 외에도 스타일을 지정하지 않는 것입니다.

참조 : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-placeholder.

올바른 형식은 예상 입력을 명확하게 설명하기 위해 label, placeholder 및 title을 조합하여 사용합니다. 최신 브라우저는 잘못된 필수 입력란을 제출하려고 할 때 필수 입력란 대화 상자에서 title 속성 값을 사용합니다. 이 예제를보십시오 :

<form> 
 
    <label>Search: 
 
     <input name="searchterms" 
 
       type="search" 
 
       placeholder="keyword/s" 
 
       required="required" 
 
       title="Space-separated keywords only" /> 
 
    </label> 
 
    <input type="submit" value="go" /> 
 
</form>