0

我正在使用 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 顶部。

4

3 回答 3

1

添加position:relative到焦点上的文本区域。此外，如果你top:-2px起飞，当你专注于它时，你不会得到跳跃。

小提琴

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;
}
于 2014-06-30T17:35:47.140 回答
1

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

于 2014-06-30T17:33:55.510 回答
1

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

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

将top: 1px输入字段向下推一个像素并覆盖其下方的文本区域字段。您可以top: 1px从 CSS 中删除规则或margin-top: 1px向类添加规则.pure-form .pure-group textarea:last-child。

于 2014-06-30T17:33:58.327 回答