Cool Labels - only labels

by SamHasler

HTML

<body>
    <form>
        <label for="name">name
            <input id="name" type="text" placeholder="John Doe" />
        </label>
        <label for="email">email
            <input id="email" type="text" placeholder="[email protected]" />
        </label>
    </form>
</body>

CSS

body {
        background: #eee;
    }
    
    form {
        width: 250px;
        margin: auto;
        margin-top: 50px;
    }
    
    label {
        border: 1px dotted rgba(0,0,0,.3);
        background: #fff;
        margin-bottom: 10px;
        width: 100%;
        _width: 60px;
        _display: inline-block;
        text-align: right;
        float: left;
        height: 100%;
        margin-top: 5px;
    }
    
    input {
        border: none;
        background: transparent;
        width: 175px; /* 250-70-5 padding */
        padding: 5px;
        padding-left: 70px;
        margin-left: -60px;
    }
    input:focus {
        background: rgba(0,130,255,.1);
        outline: none;
    }