CSS仮想クラスを使用したプレースホルダの模倣

2453 ワード

CSS テキストリンク

クローンプロジェクトを実行するときにまとめられた記事です.

contentEditable="true"Artreviewを設定すると、inputのようにこの領域を編集できます.

<div contentEditable="true"></div>

placeholderを設定したい場合は、どうすればいいですか?placeholderArtreviewを簡単に適用できますか?placeholderArtreviewは、inputまたはtextareaとマークされている場合にのみ表示されます.

// bad
<div contentEditable='true' placeholder='명령어 사용시 "/"를 입력하세요'></div>

inputtextareaこのほか、CSS仮想クラスを使用して問題を解決する必要があります.このエイリアスはplaceholderArtreviewには適用されません.

プレースホルダをCSS仮想クラスに倣う

次の가상 클래스を使用して、placeholderを模倣できます.

:empty

:before

:emptyサブアイテムで、テキストを含まない要素を選択します.:before疑似要素をその選択者のサブ要素として作成する.通常はcontentと併用
次のCSSコードを使用してplaceholderを模倣できます.

[contenteditable="true"]:empty:before {
   content: attr(placeholder);
}

contenteditable=trueは要素

:emptyテキストが作成されていない(空)要素を選択

:before要素としての第1のサブアイテム

attr()関数としてインポートされるプレースホルダツリーの値

content.

CSSの仮想クラスplaceholderを使用できるようになりました.

この問題について(CSS仮想クラスを使用したプレースホルダの模倣), 我々は、より多くの情報をここで見つけました https://velog.io/@sa02045/CSS-contentEditabletrue인-div에-placeholder-설정하기

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol