<form action="">
    <input type="text" placeholder="Text goes here">
    <input type="text" placeholder="Is disabled" disabled>
    <input type="number" placeholder="Numbers">
    <input type="email" pattern="/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" required placeholder="enter email" />
    <input type="submit" class="btn btn--primary" value="Submit">
    <input type="text" class="input--date js-input-date-from">
</form>
<h3>
	using browser autofill feature
</h3>
<form method="post" id="usrForm">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" autocomplete="name">
    <label for="jobtitle">Job Title</label>
    <input type="text" id="jobtitle" name="jobtitle" autocomplete="organization-title">
    <label for="company">Organization</label>
    <input type="text" id="company" name="company" autocomplete="organization">
    <label for="tel">Telephone Number</label>
    <input type="tel" id="tel" name="tel" autocomplete="home tel">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" autocomplete="home email">
    <h4>Shipping Address</h4>
    <label for="address">Street Address</label>
    <textarea id="address" name="address" rows="3" autocomplete="shipping street-address"></textarea>
    <label for="address-level2">City (Address Level 2)</label>
    <input type="text" id="address-level2" name="city" autocomplete="shipping address-level2">
    <label for="state">State/Province (Address Level 1)</label>
    <input type="text" id="state" name="state" autocomplete="shipping address-level1">
    <label for="country-name">Country Name</label>
    <input type="text" id="country-name" name="country-name" autocomplete="shipping country-name">
    <label for="postal-code">Postal Code</label>
    <input type="text" id="postal-code" name="postal-code" autocomplete="shipping postal-code">
    <h4>Do not use a real card</h4>
    <label for="nameoncard">Name on Card</label>
    <input type="text" id="nameoncard" name="nameoncard" autocomplete="cc-name">
    <label for="ccnumber">Credit Card Number</label>
    <input type="text" id="ccnumber" name="ccnumber" autocomplete="cc-number">
    <label for="cc-exp-month">Expiration Month</label>
    <input type="number" id="cc-exp-month" name="cc-exp-month" autocomplete="cc-exp-month">
    <label for="cc-exp-year">Expiration Year</label>
    <input type="number" id="cc-exp-year" name="cc-exp-year" autocomplete="cc-exp-year">
    <label for="cvv2">CVV</label>
    <input type="text" id="cvv2" name="cvv2" autocomplete="cc-csc">
    <input type="submit" value="Submit" name="submit">
</form>
<form action="">
<input type="text" placeholder="Text goes here">
<input type="text" placeholder="Is disabled" disabled>
<input type="number" placeholder="Numbers">
<input type="email" pattern="/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" required placeholder="enter email" /> 
<input type="submit" class="btn btn--primary" value="Submit">
<input type="text" class="input--date js-input-date-from">
</form>
<h3>
	using browser autofill feature
</h3>
<form method="post" id="usrForm">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" autocomplete="name">
  <label for="jobtitle">Job Title</label>
  <input type="text" id="jobtitle" name="jobtitle" autocomplete="organization-title">
  <label for="company">Organization</label>
  <input type="text" id="company" name="company" autocomplete="organization">
  <label for="tel">Telephone Number</label>
  <input type="tel" id="tel" name="tel" autocomplete="home tel">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" autocomplete="home email">
  <h4>Shipping Address</h4>
  <label for="address">Street Address</label>
  <textarea id="address" name="address" rows="3" autocomplete="shipping street-address"></textarea>
  <label for="address-level2">City (Address Level 2)</label>
  <input type="text" id="address-level2" name="city" autocomplete="shipping address-level2">
  <label for="state">State/Province (Address Level 1)</label>
  <input type="text" id="state" name="state" autocomplete="shipping address-level1">
  <label for="country-name">Country Name</label>
  <input type="text" id="country-name" name="country-name" autocomplete="shipping country-name">
  <label for="postal-code">Postal Code</label>
  <input type="text" id="postal-code" name="postal-code" autocomplete="shipping postal-code">
  <h4>Do not use a real card</h4>
  <label for="nameoncard">Name on Card</label>
  <input type="text" id="nameoncard" name="nameoncard" autocomplete="cc-name">
  <label for="ccnumber">Credit Card Number</label>
  <input type="text" id="ccnumber" name="ccnumber" autocomplete="cc-number">
  <label for="cc-exp-month">Expiration Month</label>
  <input type="number" id="cc-exp-month" name="cc-exp-month" autocomplete="cc-exp-month">
  <label for="cc-exp-year">Expiration Year</label>
  <input type="number" id="cc-exp-year" name="cc-exp-year" autocomplete="cc-exp-year">
  <label for="cvv2">CVV</label>
  <input type="text" id="cvv2" name="cvv2" autocomplete="cc-csc">
  <input type="submit" value="Submit" name="submit">
</form>
/* No context defined for this component. */
input[type="text"], 
input[type="email"], 
input[type="search"], 
input[type="password"], 
input[type="number"],
textarea {
    appearance: none;
    -webkit-font-smoothing: antialiased;
    min-height: 34px;
    padding: 0.2em;
    background-color: $white;
    transition: all 300ms ease;
    border: 2px solid $grey;
    &:focus {
    	outline: none;
        border: 2px solid $grey--light;
    }
    &:disabled {
        background-color: rgb(236, 241, 244);
    }

    &.input--block {
        width: 100%;
    }
}
.input--date {
    background-image: url('/assets/icons/calendar.png');
    background-image: url('/assets/icons/calendar.svg');
    background-repeat: no-repeat;
    background-position: center right;
    padding-right: 2.5em;
    background-size: 18px;
    background-position-x: 98%; 
}
$(document).ready(function() {
	if ($('.js-input-date-from').length> 0 || $('.js-input-date-to').length > 0){
		var pickerFrom = new Pikaday({ field: $('.js-input-date-from')[0] });
        var pickerTo = new Pikaday({ field: $('.js-input-date-to')[0] });
	}
});

There are no notes for this item.