Browser compatibility - HTML5 input types

by agib

HTML

<div class="wrapper">
    <div class="row">
        <div class="cell">Text:</div>
        <div class="cell"><input type="text"></div>
    </div>
    <div class="row">
        <div class="cell">Tel:</div>
        <div class="cell"><input type="tel"></div>
    </div>
    <div class="row">
        <div class="cell">Number:</div>
        <div class="cell"><input type="number"></div>
    </div>
    <div class="row">
        <div class="cell">Date:</div>
        <div class="cell"><input type="date"></div>
    </div>
    <div class="row">
        <div class="cell">Time:</div>
        <div class="cell"><input type="time"></div>
    </div>
    <div class="row">
        <div class="cell">Email:</div>
        <div class="cell"><input type="email"></div>
    </div>
</div>

CSS

body {
    font-family: Verdana;
}
.wrapper {
    display: table;
    margin: 20px;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
    padding-bottom: 6px;
}
.cell:first-of-type {
    padding-right: 12px;
}