Shadow DOM

🦉 프로젝트 🔻/🐞 프로젝트

Shadow DOM

output7 2022. 1. 6. 17:43

Shadow DOM

개발자도구를 켠 상태에서 F1 를 누르면 환경설정이 나옴
Show user agent shadow DOM을 체크함
숨겨진 HTML 요소의 스타일을 설정할 수 있음
-webkit- : 크롬, 오페라, 사파리, Edge 브라우저에서 사용함
-moz- : 파이어폭스에서 사용함
-ms- : 익스플로러에서 사용함
progress 설정할 때 appearance: none을 해줘야 함

코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* COMMON */
      div {
        margin-bottom: 50px;
      }
      /* LABEL-INPUT */
      .labelInput label {
        padding: 16px 18px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        line-height: 59px;
        box-sizing: border-box;
        color: #fff;
        background-color: #2f9e44;
        cursor: pointer;
        border-radius: 5px;
      }
      #input-file {
        display: none;
      }
      /* FILE-SHADOWDOM */
      .fileShadowDom input[type='file'] {
        color: #1864ab;
        font-size: 16px;
      }
      .fileShadowDom input[type='file']::-webkit-file-upload-button {
        border: none;
        background-color: #1864ab;
        padding: 16px 12px;
        color: #fff;
        font-weight: bold;
        border-radius: 5px;
      }
      /* TEXT-SHADOWDOM */
      .textShadowDom input[type='text'] {
        padding: 16px 18px;
        font-size: 16px;
        outline: none;
        border: 1px solid #a61e4d;
        border-radius: 5px;
      }
      .textShadowDom input[type='text']::-webkit-input-placeholder {
        color: #ffa94d;
        font-weight: bold;
      }
      /* PROGRESS-SHADOWDOM */
      .progressShadowDom progress {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 230px;
        height: 30px;
      }
      .progressShadowDom progress::-webkit-progress-bar {
        border-radius: 30px;
        background-color: #333;
      }
      .progressShadowDom progress::-webkit-progress-value {
        background-color: #ffd43b;
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
      }
    </style>
  </head>
  <body>
    <div class="labelInput">
      <label for="input-file">업로드</label>
      <input type="file" id="input-file" />
    </div>

    <div class="fileShadowDom">
      <input type="file" />
    </div>

    <div class="textShadowDom">
      <input type="text" placeholder="입력하세요" />
    </div>

    <div class="progressShadowDom">
      <progress value="0.7"></progress>
    </div>
  </body>
</html>