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。

基本上我的问题是，对于两个输入组，焦点上的边框显示在整个输入周围，但是使用一个输入和一个textarea组，焦点上的边框不会显示在textarea的顶部。

Answer 1

尝试添加： margin-top：1px;

Answer 2

如果您查看示例中第一个输入字段的CSS，您会看到：

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类。

Answer 3

将position:relative添加到焦点上的textarea。此外，如果你关闭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;
}

纯css输入组边界问题

3 个答案: