how to create a horizontal grouped input with .pure-group in purecss?

Question

from http://purecss.io/forms/ on the section "Grouped Inputs" it only shows a vertical/stacked grouped inputs, but is it possible to make a horizontal one?

score 1 · Answer 1 · answered Jun 09 '15 at 02:01

You could use the multi-column form example but set the class of the input fields to pure-u-1 like this:

<form class="pure-form pure-form-stacked">
    <fieldset>
        <div class="pure-g">
            <div class="pure-u-1 pure-u-md-1-3">
                <input id="Username" class="pure-u-1" type="text" placeholder="Username">
            </div>
            <div class="pure-u-1 pure-u-md-1-3">
                <input id="Password" class="pure-u-1" type="text" placeholder="password">
            </div>
            <div class="pure-u-1 pure-u-md-1-3">
                <input id="email" class="pure-u-1" type="email" required placeholder="email">
            </div>
        </div>
        <label for="terms" class="pure-checkbox">
            <input id="terms" type="checkbox">I've read the terms and conditions</label>
        <button type="submit" class="pure-button pure-button-primary">Submit</button>
    </fieldset>
</form>

JSFiddle

thanks for your comment but this is not what I asked in the question, I am looking for a grouped Input like the one at [link](http://purecss.io/forms/#grouped-inputs) but they only show a vertical/stacked grouped inputs, but I want to know how to make a grouped inputs to be displayed horizontally. — Jacky, Jun 09 '15 at 12:44
Ok. The purecss code does not currently include an option to style the input for a horizontal group. Starting with the [form css](https://github.com/yahoo/pure/blob/master/src/forms/css/forms.css) you would have to write your own css to manage the border radiuses, taking into account break points where border radiuses would change. — stickyuser, Jun 15 '15 at 23:01

score 0 · Answer 2 · answered Oct 29 '15 at 18:27

Sure, just extend it. Here's something I whipped up quickly for my own purposes - may need to expand on it for other elements:

.pure-form {
  .pure-horizontal-group {
    input:first-child, textarea:first-child {
      border-radius: 4px 0 0 4px;
      margin: 0 0 0 -2px;
    }

    input, textarea {
        display: inline-block;
        padding: 10px;
        margin: 0 -2px 0 0;
        border-radius: 0;
        position: relative;
    }

    input:last-child, textarea:last-child {
      border-radius: 0 4px 4px 0;
      margin: 0 0 0 -2px;
    }
  }
}

how to create a horizontal grouped input with .pure-group in purecss?

2 Answers2