Gleiche Zeilenhöhe in Formularelementen

by Jens Grochtdreis

HTML

<h1>Formularelemente auf gleicher Höhe</h1>

<h2>Zum Absenden wird ein Input-Element genutzt</h2>
<form action="">
    <div>
        <input type="text" placeholder="Benutzername" />
        <input type="password" placeholder="Passwort" />
        <input type="submit" value="Login &raquo;" />
    </div>
</form>

<h2>Zum Absenden wird ein Button-Element genutzt</h2>

<form action="">
    <div>
        <input type="text" placeholder="Benutzername" />
        <input type="password" placeholder="Passwort" />
        <button type="submit">Login &raquo;</button>
    </div>
</form>

CSS

input, button {
    float: left;

    padding: 0 4px;
    margin: 0 5px 0 0;
    border: 0;
    background-color: rgb(202,189,165);

    color: #000;
    font-size: 14px;
    border-radius: 4px;
 
    height: 26px;
    line-height:26px;
}


form {
    margin: 0 0 40px 0;
}


form > div {
    overflow: hidden;
}


::-webkit-input-placeholder {color: #666;}
:-moz-placeholder {color: #666;}

body { padding: 40px; background: #685b46; color: #fff; font-family: Verdana, sans-serif;}

h1 { font-size: 24px;margin: 0 0 30px 0;}
h2 {font-size: 18px;margin: 0 0 15px 0;}

JavaScript

// Placeholder-Formatierung 
// http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css

// Formularelemente mit gleicher Höhe
// http://www.shiftedwork.de/blog/2010/09/06/formularelemente-mit-gleicher-hohe-so-gehts/