mhulse / css-issues

Practical CSS code snippets and examples.
11 stars 1 forks source link

Input with button on same line, no widths #174

Open mhulse opened 6 years ago

mhulse commented 6 years ago

This example assumes you have styles for the look/feel elsewhere in your code:

/*
<div class="advo-input-group">
    <div>
        <input type="password" placeholder="Password">
    </div>
    <div>
        <button class="advo-button">Go</button>
    </div>
</div>
*/

.advo-input-group {
    width: 100%;
    display: table;
}
.advo-input-group > div {
    display: table-cell;
    width: 100%;
    background-clip: padding-box;
}
.advo-input-group > div + div {
    border-left: 1rem solid transparent;
}
.advo-input-group input,
.advo-input-group button {
    margin: 0;
}
.advo-input-group input {
    width: 100%;
}
.advo-input-group button {
    margin: 0;
    width: auto;
}