2012-11-05 13 views
0

Twitter Bootstrap 프레임 워크를 사용하는 WordPress 웹 사이트가 있습니다. 다음은 웹 사이트입니다 : http://www.vickieats.com/WordPress 검색 입력 필드의 스타일이 올바르지 않습니다.

예제 페이지 (http://twitter.github.com/bootstrap/base-css.html#forms)에서 사용하는 검색 양식과 매우 유사한 웹 사이트 검색 양식의 스타일을 지정하려고합니다. 그러나 검색 버튼은 입력 요소보다 높이가 훨씬 큽니다. 목표는 높이를 높이는 것입니다.

CSS 스타일이 내가하려는 것을 무시하고 있다고 생각하지만 FireBug를 사용하여 대답을 찾지 못했습니다. 아니면 간과 할 수있는 아주 단순한 무언가가 될 수 있습니다.

어느 쪽이든, 모든 도움을 주시면 감사하겠습니다.

답변

0

는 스타일 시트의 끝 (섹션 또는 파일)

이 추가 :

큰 입력 필드가 대신 버튼을 일치하는 부트 스트랩 CSS에서이 거대한 선택에서 'height: 20px;'을 제거 할 수 있도록

Chrome 관리자에서 검색 창을 버튼에 맞춰 정렬하면 이미 input.search-query를 선언 한 것은 중요하지 않습니다. CSS에서 실제로 정리할 수는 있지만, padding-right이 두 번 이상 정의 된 것처럼 보입니다.

결과 http://tinypic.com/view.php?pic=2lmtnht&s=6

0

type="search"에서 type="text"으로 변경해 보셨습니까? 내 생각 엔 텍스트가있는 동안 검색은 사용자 지정할 수 없다는 것입니다.

0

선 높이는 버튼의 크기를 변경하는 간단한 '높이'선언을 방지합니다.

.form-search .input-append .btn { 
line-height: 10px; 
} 

문제는 내가 유용성 버튼을 일치하도록 입력 큰 만드는 생각 하는데요,이 일이 매우 작은 수이다 : 나는 버튼의 크기를 조정하려면 다음을 사용할 수 있었다. 당신이 변경을 원 둘레에 도움이

희망,

0

나는 그래서 여기에 모두의, 어떤 방법 확실하지 않았다.

부트 스트랩 CSS의 .btn 클래스에서 'padding: 4px 14px;'및 'line-height: 20px;'을 제거하여 버튼을 입력 필드만큼 작게 만듭니다.

'select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input'

+0

bootstrap.css 파일을 편집 할 수있는 매우 나쁜 생각의 대부분 스크린 샷. 기본 스타일링을 변경해야하는 경우에는 로컬 '