Make Beautiful Tag Input

Koben akan melakukan update artikel dengan tema seputaran the input tag! Jika diperhatikan dengan seksama tag input ternyata memiliki kelebihan tersendiri. Dengan majunya bahasa style-sheet, telah jebol banjir trik tutorial menggunakan tag input itu sendiri :) Silahkan searching pd kotak pencarian dengan keyword input maka akan tampak tutorial full stylish punya :D So, are you ready to start the adventure today :)) Anda ingin memasang plugin jQuery add clear skorecky.github.io/Add-Clear Ketika mengetikan sesuatu di dalam kotak, tombol ✖ (clear) akan muncul. Full menggunakan CSS how to make CSS form validation codepen.io/benschwarz/pen/HBrDJ, sobat dapat mengcustomize kode yg sudah ada agar lebih keren.

Fancy text imputs use CSS. Coba ketikan apapun di dalam kotak!Source by: codepen.io/abergin/pen/jIplf
Itu di buat dengan bahasa CSS modus SASS! Lakukan klik tombol mirip gambar mata dgn title Toggle Compiled View pada kotak kode tujuan. Kalau pusing disini ajah.

.kotax button, .kotax .question label, .kotax .question input[type="text"] {
-o-transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
-webkit-transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
}
.kotax {
position: relative;
display: inline-block;
max-width: 700px;
min-width: 500px;
box-sizing: border-box;
padding: 30px 25px;
background-color: white;
border-radius: 10px;
border: 1px solid #aaa;
margin: 40px 0;
left: 50%;
-ms-transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.kotax button {
margin-top: 35px;
background-color: white;
border: 1px solid #ff4a56;
line-height: 0;
font-size: 17px;
display: inline-block;
box-sizing: border-box;
padding: 20px 15px;
border-radius: 10px;
color: #ff4a56;
font-weight: 100;
letter-spacing: 0.01em;
position: relative;
z-index: 1;
}
.kotax button:hover, form button:focus {
color: white;
background-color: #ff4a56;
}
.kotax .question {
position: relative;
padding: 10px 0;
}
.kotax .question:first-of-type {
padding-top: 0;
}
.kotax .question:last-of-type {
padding-bottom: 0;
}
.kotax .question label {
transform-origin: left center;
color: #ff4a56;
font-weight: 100;
letter-spacing: 0.01em;
font-size: 17px;
box-sizing: border-box;
padding: 10px 15px;
display: block;
position: absolute;
margin-top: -40px;
z-index: 2;
pointer-events: none;
}
.kotax .question input[type="text"] {
appearance: none;
background-color: none;
border: 1px solid #ff4a56;
line-height: 0;
font-size: 17px;
width: 100%;
display: block;
box-sizing: border-box;
padding: 10px 15px;
border-radius: 10px;
color: #ff4a56;
font-weight: 100;
letter-spacing: 0.01em;
position: relative;
z-index: 1;
}
.kotax .question input[type="text"]:focus {
outline: none;
background: #ff4a56;
color: white;
margin-top: 30px;
}
.kotax .question input[type="text"]:valid {
margin-top: 30px;
}
form .question input[type="text"]:focus ~ label {
-ms-transform: translate(0, -35px);
-webkit-transform: translate(0, -35px);
transform: translate(0, -35px);
}
.kotax .question input[type="text"]:valid ~ label {
text-transform: uppercase;
font-style: italic;
-ms-transform: translate(5px, -35px) scale(0.6);
-webkit-transform: translate(5px, -35px) scale(0.6);
transform: translate(5px, -35px) scale(0.6);
}

<form class="kotax">
  <div class="question">
    <input type="text" required/>
    <label>First Name</label>
  </div>
  <div class="question">
    <input type="text" required/>
    <label>Last Name</label>
  </div>
  <div class="question">
    <input type="text" required/>
    <label>Email Address</label>
  </div>
  <div class="question">
    <input type="text" required/>
    <label>Email Confirm</label>
  </div>
  <button>Submit</button>
</form>

Bonusnya bray:

• Text input love.
codepen.io/MichaelArestad/pen/ohLIa
• Single input 3D form.
thecodeplayer.com/walkthrough/single-input-3d-form
• Animating float labels using jQuery and CSS3.
thecodeplayer.com/walkthrough/animating-float-labels-jquery-css3
• Create fancy contact form with CSS 3 and jQuery.
youhack.me/2010/07/22/create-a-fancy-contact-form-with-css-3-and-jquery

Segitu saja informasi tentang dunia tag input. Sebenarnya banyak sekali rujukan yg bisa kalian lihat. Karena keterbatasan niat gue, jadi cuman itu lah 3:-O

Happy input \m/