How to style a credit card expiration date input field to include spaces and forward slash?

You can accomplish this using two inputs fields, removing the border of the input fields, adding a border to a wrapper element to appear as one input and a place / in between like so. - jsFiddle Demo

HTML

 <span class="expiration">
    <input type="text" name="month" placeholder="MM" maxlength="2" size="2" />
    <span>/</span>
    <input type="text" name="year" placeholder="YY" maxlength="2" size="2" />
</span>

CSS

.expiration {
    border: 1px solid #bbbbbb;
}
.expiration input {
    border: 0;
}

Result

input field data slash

This is just the CSS needed to demonstrate the idea, of course you can style it however you'd like.

I used <span>s because they are inline elements, as are input fields.