폼 컨트롤 스타일

분류: 폼 요소

기본 .form-control의 외형을 바꾸는 스타일 변형 클래스 두 가지를 보여줍니다. .form-control-rounded는 모서리를 완전히 둥글게(pill 형태) 만들고, .form-control-flush는 테두리와 배경을 없애 밑줄만 남기는 미니멀한 입력 스타일입니다.

소스

<div class="mb-3">
    <label class="form-label">둥근 폼 컨트롤</label>
    <input type="text" class="form-control form-control-rounded mb-2" name="Form control rounded" placeholder="텍스트..">
    <div class="input-icon">
        <input type="text" class="form-control form-control-rounded" placeholder="검색…">
        <span class="input-icon-addon">
            <i class="f:20 ti ti-search"></i>
        </span>
    </div>
</div>

<div class="mb-3">
    <label class="form-label">플러시 폼 컨트롤</label>
    <input type="text" class="form-control form-control-flush" name="Form control flush" placeholder="텍스트..">
</div>

사용된 주요 클래스

클래스	역할
f:20	master-css 표기로 아이콘 글자 크기 20px
form-control	텍스트 입력의 기본 스타일
form-control-flush	테두리·배경을 제거하고 밑줄만 남기는 스타일
form-control-rounded	모서리를 완전히 둥글게(pill 형태) 만드는 스타일
form-label	입력 필드 위에 붙는 라벨 텍스트 스타일
input-icon, input-icon-addon	입력창에 아이콘을 겹쳐 표시하는 컨테이너와 아이콘 영역
mb-2, mb-3	요소 사이 아래쪽 여백(margin-bottom)
ti, ti-search	Tabler Icons 기본 클래스와 검색 아이콘

참고 자료

• Form elements

실전 예제 페이지

HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/폼-요소-폼-컨트롤-스타일.html 경로에서 렌더링 결과를 확인할 수 있습니다.

미리보기새 창에서 열기 ↗