Pure css input group border issue

Question

I'm using PureCSS and have a form that looks like:

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

Here's a JSfiddle.

Basically my issue is that with the two input group, the borders on focus show around the entire input, but with the one input and one textarea group, the borders on focus don't show on top of the textarea.

score 1 · Answer 1 · answered Jun 30 '14 at 17:33

1

Try adding : margin-top: 1px;

answered Jun 30 '14 at 17:33

clever_bassi

2,392
2
24
43

score 1 · Answer 2 · answered Jun 30 '14 at 17:33

If you have a look at the CSS for the first input field in you example you'll see:

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

The top: 1px is pushing the input field down one pixel and covering the text-area field below it. You could remove the top: 1px rule from the CSS or add a margin-top: 1px rule to the .pure-form .pure-group textarea:last-child class.

Blunderfest · Accepted Answer · 2014-06-30T17:47:42.063

1

Add position:relative to the textarea on focus. In addition, if you take the top:-2px off, you won't get a jump when you focus on it.

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;
}

edited Jun 30 '14 at 17:47

answered Jun 30 '14 at 17:35

Blunderfest

1,854
1
28
46

Pure css input group border issue

3 Answers3