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
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.