HTML_Shadow DOM
<input type="flie">などのコードを挿入すると、ボタンと2文字が生成されます.(コード(進捗やrangeなど)このようなHTML開発の過程で、コードが複雑すぎることを避けるために、Shadow DOMと呼ばれるいくつかのHTML要素が隠されている.
▶▼▼シャドウDOM設定
Chrome開発者ツールを開く場合、set-preferences-show user agent shadow DOMを開くと、非表示の要素を確認できます.
▶使用▼シャドウDOM
input::-webkit-input-placeholder {
color : red;
}<input placeholder="안녕하세요">でplaceholerのフォント色を変更する場合は、上記のコードを使用してshadow DOM要素を変更できます.▶▼-webkit-修飾語は?
Chrome、Opera、Safari、Edgeブラウザでのみ実行するスタイルを作成します.(火狐は-moz-).各ブラウザはshadow DOMをチェックする必要があります.
▼▼開発者ツールからSelectorを盗む
▶▼▼EX)<進捗>ラベルスタイリング
<progress value="0.4"> </progress>
progress {
/*기본 배경은 없애주는게 좋습니다*/
-webkit-appearance: none;
-moz-appearance : none;
appearance: none;
background: white;
/* IE10 호환성용 */
color: red;
}
progress::-webkit-progress-bar {
background-color: #eee;
border-radius: 2px;
}
progress::-webkit-progress-value {
background-color: red;
border-radius: 2px;
}
/*파이어폭스 호환성을 위해*/
progress::-moz-progress-bar {
background-color: red;
border-radius: 2px;
}Reference
この問題について(HTML_Shadow DOM), 我々は、より多くの情報をここで見つけました https://velog.io/@arsshavin/HTMLShadow-DOMテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol