순수 CSS를 입력 그룹 국경 문제

Question

나는 PureCSS를 사용과 같은 형태가있어 :

<form class="pure-form"> 
    <fieldset class="pure-group"> 
     <input type="text" class="pure-input-1-2" placeholder="Username"> 
     <textarea class="pure-input-1-2" placeholder="About me bio"></textarea> 
    </fieldset> 

    <fieldset class="pure-group"> 
     <input type="text" class="pure-input-1-2" placeholder="Another Group"> 
     <input type="text" class="pure-input-1-2" placeholder="More Stuff"> 
    </fieldset> 

    <button type="submit" class="pure-button pure-input-1-2 pure-button-primary">Sign in</button> 
</form> 

여기 JSfiddle의를.

기본적으로 내 문제는 포커스가있는 테두리가 전체 입력 주위에 표시되지만 입력 및 텍스트 영역 그룹이 하나 인 경우 포커스가있는 테두리가 텍스트 영역 위에 표시되지 않는다는 것입니다.

Answer 1

포커스가있는 텍스트 영역에 position:relative을 추가하십시오. 또한 top:-2px을 끄면 초점을 맞출 때 점프하지 않습니다.

Fiddle

CSS

.pure-form .pure-group input:last-child, 
.pure-form .pure-group textarea:last-child { 
    border-radius: 0 0 4px 4px; 
} 
textarea:focus{ 
    position:relative; 
} 

Answer 2

다음을 추가해보십시오. margin-top : 1px; 당신이 예에서 첫 번째 입력 필드에 대한 CSS를 읽어보십시오

Answer 3

은 다음과 같이 표시됩니다

pure-form .pure-group input:first-child { 
    top: 1px; 
    border-radius: 4px 4px 0 0; 
} 

가 top: 1px은 하나 개의 픽셀 아래 입력 필드를 밀고 아래의 텍스트 영역 필드를 덮고 그것. CSS에서 top: 1px 규칙을 삭제하거나 margin-top: 1px 규칙을 .pure-form .pure-group textarea:last-child 클래스에 추가 할 수 있습니다.