부트 스트랩없이 :
잠시 후에 부트 스트랩에 접근 할 것입니다. 그러나이 작업을 수행하기위한 기본 CSS 개념이 있습니다. 로 먹이의 수염이 지적 , 당신은 절대적으로 입력 요소의 아이콘 내부를 배치하여 CSS와 함께이 작업을 수행 할 수 있습니다. 그런 다음 텍스트가 아이콘과 겹치지 않도록 양쪽에 패딩을 추가하십시오.
따라서 다음 HTML의 경우 :
<div class="inner-addon left-addon">
<i class="glyphicon glyphicon-user"></i>
<input type="text" class="form-control" />
</div>
다음 CSS를 사용하여 글리프를 왼쪽과 오른쪽으로 맞출 수 있습니다.
/* enable absolute positioning */
.inner-addon {
position: relative;
}
/* style icon */
.inner-addon .glyphicon {
position: absolute;
padding: 10px;
pointer-events: none;
}
/* align icon */
.left-addon .glyphicon { left: 0px;}
.right-addon .glyphicon { right: 0px;}
/* add padding */
.left-addon input { padding-left: 30px; }
.right-addon input { padding-right: 30px; }
참고 : 이것은 글리프 콘을 사용 한다고 가정 하지만 font-awesome 과 동일하게 작동합니다 .
FA를 들어, 방금 교체 .glyphicon와 함께.fa
부트 스트랩으로 :
버퍼가 지적한 바와 같이 , 이는 선택적인 아이콘과 함께 유효성 검사 상태 를 사용하여 부트 스트랩 내에서 기본적으로 수행 될 수 있습니다 . 이것은 .form-group요소에 클래스를 .has-feedback, 아이콘에 클래스를 부여하여 수행됩니다 .form-control-feedback.
가장 간단한 예는 다음과 같습니다.
<div class="form-group has-feedback">
<label class="control-label">Username</label>
<input type="text" class="form-control" placeholder="Username" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
찬성 :
- 다양한 양식 유형 (기본, 수평, 인라인)에 대한 지원 포함
- 다양한 제어 크기 (기본, 소형, 대형)에 대한 지원 포함
단점 :
- 왼쪽 정렬 아이콘에 대한 지원은 포함하지 않습니다
단점을 극복 하기 위해 왼쪽 정렬 아이콘을 지원하도록 변경 사항 과 함께이 풀 요청을 작성 했습니다. 비교적 큰 변화이므로 향후 릴리스까지 연기되었지만 오늘 이러한 기능이 필요한 경우 간단한 구현 안내서가 있습니다.
CSS에 이러한 양식 변경 사항을 포함하십시오 (아래에 숨겨진 스택 스 니펫을 통해 인라인으로 표시됨)
* LESS : 또는 less를 통해 빌드 하는 경우 양식 변경 사항이 더 적습니다.
그런 다음 아이콘을 왼쪽 정렬하기 위해 .has-feedback-left클래스가있는 그룹에 클래스 .has-feedback를 포함시키기 만하면됩니다.
다른 양식 유형, 다른 컨트롤 크기, 다른 아이콘 세트 및 다른 레이블 가시성에 대해 가능한 많은 HTML 구성이 있으므로 라이브 데모와 함께 각 순열에 대해 올바른 HTML 세트를 보여주는 테스트 페이지를 만들었습니다.
PS frizi의 추가 제안 이 부트 스트랩pointer-events: none; 에 추가 되었습니다
찾고있는 것을 찾지 못했습니까 ? 다음과 같은 질문을 해보십시오.
왼쪽 정렬 피드백 아이콘을위한 CSS 추가
.has-feedback .form-control {
padding-right: 34px;
}
.has-feedback .form-control.input-sm,
.has-feedback.form-group-sm .form-control {
padding-right: 30px;
}
.has-feedback .form-control.input-lg,
.has-feedback.form-group-lg .form-control {
padding-right: 46px;
}
.has-feedback-left .form-control {
padding-right: 12px;
padding-left: 34px;
}
.has-feedback-left .form-control.input-sm,
.has-feedback-left.form-group-sm .form-control {
padding-left: 30px;
}
.has-feedback-left .form-control.input-lg,
.has-feedback-left.form-group-lg .form-control {
padding-left: 46px;
}
.has-feedback-left .form-control-feedback {
left: 0;
}
.form-control-feedback {
line-height: 34px !important;
}
.input-sm + .form-control-feedback,
.form-horizontal .form-group-sm .form-control-feedback {
width: 30px;
height: 30px;
line-height: 30px !important;
}
.input-lg + .form-control-feedback,
.form-horizontal .form-group-lg .form-control-feedback {
width: 46px;
height: 46px;
line-height: 46px !important;
}
.has-feedback label.sr-only ~ .form-control-feedback,
.has-feedback label.sr-only ~ div .form-control-feedback {
top: 0;
}
@media (min-width: 768px) {
.form-inline .inline-feedback {
position: relative;
display: inline-block;
}
.form-inline .has-feedback .form-control-feedback {
top: 0;
}
}
.form-horizontal .has-feedback-left .form-control-feedback {
left: 15px;
}
