AngularJS와 및 텍스트 각도 : 입력 자리에 대한 변경 CSS 스타일 텍스트 각도 GitHub의 프로젝트의 위키 페이지에서

Question

, 그것은 말한다 :

<div text-angular="text-angular" ta-toolbar="[]" ng-model="message" 
     placeholder="<div class='placeholder'>Write Coment...</div>"></div> 

:

https://github.com/fraywing/textAngular/wiki/Styling-the-Editor

는이 코드로 시도 그러나 화면은 다음과 같이 표시됩니다 : placeholder show as raw html

이 웹 사이트를 보신 후 다음을 시도해 보았습니다 : https://css-tricks.com/almanac/selectors/p/placeholder/

::-webkit-input-placeholder { color: red; } 

여전히 작동하지 않았습니다. 입력 된 개체 틀에 사용자 지정 스타일을 부여하려면 어떻게합니까?

Answer 1

[contenteditable=true]:empty:not(:focus):before{ 
 
    content:attr(data-text); 
 
    color: red; 
 
} 
 

 
div { 
 
    border: 1px solid black; 
 
}

<div contenteditable="true" data-text="Enter text here"></div>

내가 대답 부분이 다른 유사한 질문에 서하도록하려면 ... 방법 나 자신을 발견, 내가 대답을 게시 여기에 대신 원래의 질문에 편집을 선택합니다.

.placeholder-text 클래스를 사용하십시오. 맞춤 클래스는 아니지만 자리 표시자를 표시 할 때 텍스트 각도로 사용되는 임시 클래스입니다.

.ta-bind { 
&.placeholder-text { 
    color: red; 
} 
&:not(.placeholder-text) { 
    color: black; 
} 
} 

으로 자리를 정의 당신은`div` 안에`placeholder`을 가질 수 있다고 생각하지 않습니다

Answer 2

placeholders은 div가 아닌 입력 요소와 함께 사용해야합니다. div 태그를 inputs으로 변경해야 할 것입니다.

당신은 자리를 스타일링에 대한 올바른 생각을했다,하지만 당신은 공급 업체 접두사 브라우저

크롬, 사파리, 오페라, 에지)에 따라 조정해야 할 수도 있습니다 : :: - 웹킷 입력-자리

18 통해

파이어 폭스 4 : -moz-자리 (하나의 콜론)

파이어 폭스 19+ : : : - MOZ-자리 (두 개의 콜론)

IE 10, IE 11 : -ms-입력 자리

/* Chrome, Safari, Opera and Edge */ 
 
::-webkit-input-placeholder { color: red; } 
 
/* Firefox 4 through 18 */ 
 
:-moz-input-placeholder { color: red; } 
 
/* Firefox 19+ */ 
 
::-moz-input-placeholder { color: red; } 
 
/* IE10 and IE11 */ 
 
:-ms-input-placeholder { color: red; }

<input placeholder="Content here" />

당신이 시도 할 수있는 또 다른 것은 그것이 같은 종류의 행동을하게됩니다 DIV에 contenteditable 속성을 연결하는 것입니다 입력 요소. 그런 다음 자리 표시 자의 비헤이비어를 시뮬레이트하도록 데이터 속성을 설정할 수 있습니다.

의사 선택기는 비어 있고 집중하지 않는 경우에만 div를 타겟팅합니다.