그래서 내 양식에 검색 창을 만들려고합니다. 그러나 검색 아이콘 위로 마우스를 가져갈 때마다 오른쪽 테두리가 다른 3면으로 변경되는 것을 거부합니다. 버튼에 초점이 맞춰 졌을 때도 문제가 동일합니다. 저는 CSS를 수정하는 데 오랜 시간을 보냈으며 Z- 색인이 인접한 텍스트 상자의 문제 일 수 있다고 생각했습니다. 말할 필요도없이, 그것과 나의 다른 시도는 문제를 해결하기 위해 작동하지 않았습니다.
다음은 jsfiddle에 대한 링크입니다. http://jsfiddle.net/52VtD/6137/
그리고 문제의 코드 :
<div class = "container-fluid">
<div class = "row">
<div class = "col-xs-12 col-sm-12 col-md-4 col-md-offset-4">
<label>
<div class="input-group">
<span class="input-group-btn">
<button class = "btn btn-default no-outline" id = "customSearchButton" type = "button"><i class="glyphicon glyphicon-search"></i></button>
</span>
<input type="text" class="form-control" placeholder="Search SRGs...">
</div>
</label>
</div>
</div>
</div><!-- .container-fluid -->
이 문제를 해결할 방법이 있는지 알려주세요. 감사!
검색 버튼이 오른쪽에있는 요소로 가려진 것 같습니다. 다음은 텍스트 상자에 1px 여백을 추가하는 솔루션입니다.
.form-control {
margin-left: 1px;
}
Z- 색인도 작동합니다.
#customSearchButton {
/*...*/
z-index: 3;
}
http://getbootstrap.com/dist/css/bootstrap.css 를 보면 .form-control의 z-index가 2로 설정되어 있으므로 검색 버튼에 3+가 표시되면 그것.
.input-group .form-control {
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다