Billing Form Field

In this example below you will see how to do a Billing Form Field with some HTML / CSS and Javascript

Checkout Billing & Credit Card Form Fields

Thumbnail
This awesome code was written by bhorsey, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright bhorsey ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Billing Form Field</title>
  
  
  <link rel='stylesheet prefetch' href='http://resale.stage1.ticketsnow.com/akamai-content/css/generated/tmr.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="grid-container" style="margin-top: 20px;">
	<div class="grid-100 tablet-grid-100 mobile-grid-100">
		<div class="grid-35 tablet-grid-100 mobile-grid-100">
			<h4 class="heading">3. Confirm your Credit Card</h4>
		</div>
		<div class="grid-30 tablet-grid-100 mobile-grid-100">
			<p class="moreinfo"><a href="">Why do I need to do this?</a></p>
		</div>
	</div>
	<div class="grid-100 tablet-grid-100 mobile-grid-100 ap-inputs">	
		<div class="grid-50 tablet-grid-50 mobile-grid-100" style="margin-bottom: 20px;">
			<div class="grid-100 tablet-grid-100 mobile-grid-100">
				<h6>Credit Card Information</h6>
			</div>
			<div class="mobile-grid-30 mobile-suffix-70 hide-on-desktop hide-on-tablet">
				<input placeholder="CC Image" type="" />
			</div>
			<div class="grid-100 tablet-grid-100 mobile-grid-100">
				<input type="text" required />
				<label alt="Credit Card Number" placeholder="Credit Card Number"></label>
			</div>
			<div class="grid-100 tablet-grid-100 mobile-grid-100 grid-parent">
				<div class="grid-50 tablet-grid-100 mobile-grid-100">
					<select type="select" />
						<option value="">MM</option>
					</select>
				</div>
				<div class="grid-50 tablet-grid-100 mobile-grid-100">
					<select type="select" />
						<option value="">YY</option>
					</select>
				</div>
			</div>
			<div class="grid-100 tablet-grid-100 mobile-grid-100 grid-parent">
				<div class="grid-40 tablet-grid-40 mobile-grid-90">
					<input type="text" required />
					<label alt="CVV" placeholder="CVV"></label>
				</div>
				<div class="grid-10 tablet-grid-10 mobile-grid-10 info-icon">
					<a href="#" class><i class="fa fa-exclamation-circle"></i><span class="tooltip">This is a pure CSS Hover!</span></a>
				</div>
				<div class="grid-20 prefix-30 tablet-grid-30 tablet-prefix-20  hide-on-mobile">
					<input type="text" placeholder="CC Image" type="" required />
				</div>
			</div>
		</div>
		<div class="grid-50 tablet-grid-50 mobile-grid-100">
			<div class="grid-100 tablet-grid-100 mobile-grid-100">
				<h6>Billing Address</h6>
			</div>
			<div class="grid-100 tablet-grid-100 mobile-grid-100 grid-parent">
				<div class="grid-50 tablet-grid-100 mobile-grid-100">
					<input type="text" required />
					<label alt="First Name" placeholder="First Name"></label>
				</div>
				<div class="grid-50 tablet-grid-100 mobile-grid-100">
					<input type="text" required />
					<label alt="Last Name" placeholder="Last Name"></label>
				</div>
			</div>
			<div class="grid-100 tablet-grid-100 mobile-grid-100">
				<input type="text" required />
				<label alt="Company Name (Optional)" placeholder="Company Name (Optional)"></label>
			</div>
			<div class="grid-100 tablet-grid-100 mobile-grid-100">
				<input type="text" required />
				<label alt="Address" placeholder="Address"></label>
			</div>
			<div class="grid-100 tablet-grid-100 mobile-grid-100">
				<input type="text" required />
				<label alt="Address (Optional)" placeholder="Address (Optional)"></label>
			</div>
			<div class="grid-100 tablet-grid-100 mobile-grid-100">
				<input type="text" required />
				<label alt="Town / State" placeholder="Town / State"></label>
			</div>
			<div class="grid-100 tablet-grid-100 mobile-grid-100">
				<select type="select" />
					<option value="default" id="default" default selected>State / Province</option>
					<option value="Australia">Australia</option>
				</select>
			</div>
			<div class="grid-100 tablet-grid-100 mobile-grid-100">
				<input type="text" required />
				<label alt="Postal Code" placeholder="Postal Code"></label>
			</div>
			<div class="grid-100 tablet-grid-100 mobile-grid-100">
				<select type="select">
					<option value="">Country</option>
				</select>
			</div>
			<div class="grid-100 tablet-grid-100 mobile-grid-100 grid-parent">
				<div class="grid-50 tablet-grid-100 mobile-grid-100">
					<input type="text" required />
					<label alt="Phone Number" placeholder="Phone Number"></label>
				</div>
				<div class="grid-50 tablet-grid-100 mobile-grid-100">
					<input type="text" required />
					<label alt="Alt Phone Number" placeholder="Alt Phone Number"></label>
				</div>
			</div>
		</div>
	</div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/bhorsey/billing-form-field-pbNamQ */
.heading {
  margin-bottom: 20px;
}
@media (max-width: 958px) {
  .heading {
    margin-bottom: 0;
  }
}

p.moreinfo {
  font-size: 11px;
  line-height: 32px;
}
@media (max-width: 958px) {
  p.moreinfo {
    margin-bottom: 20px;
    line-height: 20px;
    margin-left: 30px;
  }
}

.ap-inputs select {
  color: #a9a9a9;
  font-size: 13px;
  font-weight: 300;
  font-family: "Open Sans", Helvetica, sans-serif !important;
  font-size: 1rem;
  font-weight: 400;
  color: #575756;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  width: 100%;
  border: 0.063em solid #b7c9d3;
  background-color: white;
  height: 34px;
  padding: 0 0 0 10px;
  margin: 0 0 1em 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  box-shadow: none;
}
.ap-inputs h6 {
  margin-bottom: 10px;
}

.info-icon {
  margin-top: 4px;
}
.info-icon a {
  color: gray;
  position: relative;
}
.info-icon a:hover {
  color: #09f;
}
.info-icon a:hover span {
  display: block;
  text-align: center;
}
.info-icon a span {
  display: none;
  position: absolute;
  color: black;
  background: white;
  border: 1px solid gray;
  box-shadow: 0 0 5px gray;
  padding: 5px;
  width: 200px;
  left: -100px;
  top: 30px;
}

Comments