접두사로 스타일리시한 입력 상자 만들기 - CSS, HTML 튜토리얼

소개

이 랩에서는 시각적인, 편집 불가능한 접두사가 있는 입력 상자를 만들 것입니다. CSS 와 HTML 을 사용하여 접두사와 입력 필드가 있는 컨테이너 요소를 생성합니다. 또한, :focus-within 의사 클래스 선택자를 사용하여 부모 요소를 적절하게 스타일링하여 입력 필드와 상호 작용할 때 더 나은 사용자 경험을 제공할 것입니다.

접두사가 있는 입력

index.html 및 style.css는 이미 VM 에 제공되었습니다.

시각적인, 편집 불가능한 접두사가 있는 입력을 만들려면 다음 단계를 따르세요.

display: flex를 사용하여 .input-box 클래스가 있는 컨테이너 요소를 만듭니다.
<input> 필드에서 테두리와 윤곽선을 제거하고 대신 부모 요소에 적용하여 입력 상자처럼 보이게 합니다.
사용자가 <input> 필드와 상호 작용할 때 :focus-within 의사 클래스 선택자를 사용하여 부모 요소를 적절하게 스타일링합니다.

다음은 HTML 코드입니다.

<div class="input-box">
  <span class="prefix">+30</span>
  <input type="tel" placeholder="210 123 4567" />
</div>

다음은 CSS 코드입니다.

.input-box {
  display: flex;
  align-items: center;
  max-width: 300px;
  background: #fff;
  border: 1px solid #a0a0a0;
  border-radius: 4px;
  padding-left: 0.5rem;
  overflow: hidden;
  font-family: sans-serif;
}

.input-box .prefix {
  font-weight: 300;
  font-size: 14px;
  color: #999;
}

.input-box input {
  flex-grow: 1;
  font-size: 14px;
  background: #fff;
  border: none;
  outline: none;
  padding: 0.5rem;
}

.input-box:focus-within {
  border-color: #777;
}

오른쪽 하단 모서리에 있는 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

접두사 포함 입력

소개

접두사가 있는 입력

요약