Clean and Simple Credit Card form

Clean and Simple Credit Card form

September 21, 2017

Sick and tired of those boring plain text boxes or layouts with tab logic that doesn’t match the users experience when reading their credit card, was on the hunt for something clean – and works well for the user without requiring all sorts of tooltips and help links.

This is a nice clean solution which can be implemented as it’s own block in pretty much any form.

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

.credit-card div input {
padding: 7px;
}
.credit-card > div:first-child {
position: relative;
float: left;
z-index: 1;
box-sizing: border-box;
background: #f0f0ee;
border-radius: 10px;
-webkit-transition: background .3s ease-out;
transition: background .3s ease-out;
box-shadow: 0 0 0 1px rgba(0,0,0,.1);
width: 338px;
height: 213px;
padding: 85px 20px 0;
}
.credit-card > div:first-child > div:first-child {
position: absolute;
top: 15px;
width: calc(100% - 35px);
}
.credit-card > div:first-child > div:first-child > img {
float: right;
margin-left: 3px;
}
.credit-card > div:first-child > input:first-of-type {
width: 100%;
margin-left: -10px;
margin-top: -20px;
}
.credit-card > div:first-child > input:nth-of-type(2) {
width: 26px;
margin-left: -10px;
}
.credit-card > div:first-child > input:nth-of-type(3) {
width: 40px;
}
.credit-card > div:first-child > p:first-of-type {
font: small-caption;
padding-top: 10px;
margin-left: -10px;
line-height: 10px;
}
.credit-card > div:first-child > span:first-of-type {
padding: 0 8px;
font-weight: bold;
}

/* BACK */
.credit-card > div:nth-of-type(2) {
position: relative;
float: left;
box-sizing: border-box;
border-radius: 7px;
background-color: #e0ddd7;
box-shadow: 0 3px 4px 0 rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.1);
width: 338px;
margin-left: -220px;
margin-top: 26px;
padding: 85px 20px 0 240px;
height: 213px;
}
.credit-card > div:nth-of-type(2):before {
position: absolute;
top: 30px;
left: -1px;
content: ' ';
display: block;
width: 100%;
height: 46px;
background-color: #8e8b85;
border: 1px solid #8e8b85;
}
.credit-card > div:nth-of-type(2) > input:first-of-type {
padding: 4px;
width: 30px;
margin-left: 18px;
margin-top: 10px;
}
.credit-card > div:nth-of-type(2) > p:first-of-type {
font: small-caption;
text-align: justify;
width: 110%;
margin-left: -3px;
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<div class="credit-card">


<div>
<div>
<img src="http://placehold.it/32x32">
<img src="http://placehold.it/32x32">
<img src="http://placehold.it/32x32">
<img src="http://placehold.it/32x32">
<img src="http://placehold.it/32x32">
<img src="http://placehold.it/32x32">
</div>
<input type="text" name="number" placeholder="Card numberdasdsa" max-length="24">
<p>VALID THRU</p>
<input type="text" name="month" placeholder="MM" max-length="2">
<span>/</span>
<input type="text" name="year" placeholder="YYYY" max-length="4">
</div>


<div>
<input type="text" name="verify" placeholder="CVC" max-length="3">
<p>The three digits on the reverse side of the card</p>
</div>

</div>

css, form, html