요소의 상태 스타일링

    
      input:focus {
        border-color: #4A90E2;
        box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
        outline: none;
      }
    
  

    
      <form>
        <label for="name">이름:</label>
        <input type="text" id="name" name="name">
      </form>
    
  

    
      input:hover {
        border-color: #50E3C2;
        background-color: #F0F8FF;
      }
    
  

    
      <form>
        <label for="email">이메일:</label>
        <input type="email" id="email" name="email">
      </form>
    
  

    
      input:disabled {
        background-color: #E0E0E0;
        color: #A0A0A0;
        cursor: not-allowed;
      }
    
  

    
      <form>
        <label for="username">사용자 이름:</label>
        <input type="text" id="username" name="username" disabled>
      </form>
    
  

    
      input[type="checkbox"]:checked,
      input[type="radio"]:checked {
        background-color: #4A90E2;
        border-color: #4A90E2;
      }
    
  

    
      <form>
        <label>
          <input type="checkbox" name="option" checked>
          옵션 1
        </label>
        <label>
          <input type="checkbox" name="option">
          옵션 2
        </label>
        <label>
          <input type="radio" name="choice" checked>
          선택 1
        </label>
        <label>
          <input type="radio" name="choice">
          선택 2
        </label>
      </form>