"Untitled"
Bootstrap 4.1.1 Snippet by pluemktc

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <form role="form" style="width:400px; margin: 0 auto;"> <h1>กรอกลายละเอียด</h1> <div class="required-field-block"> <input type="text" placeholder="ชื่อสินค้า" class="form-control"> <div class="required-icon"> <div class="text">*</div> </div> </div> <br> <div class="required-field-block"> <textarea rows="3" class="form-control" placeholder="รายละเอียดข้อมูลไอดีเกม"></textarea> <div class="required-icon"> <div class="text">*</div> </div> </div> <br> <div class="required-field-block"> <input type="text" placeholder="ราคาที่ต้องการขาย" class="form-control"> <div class="required-icon"> <div class="text">*</div> </div> </div> <br> <div class="required-field-block"> <input type="number" placeholder="เลขบัญชีธนาคารหนือพร้อมเพย์" class="form-control"> <div class="required-icon"> <div class="text">*</div> </div> </div> <br> <h1>ช่องทางการติดต่อ</h1> <div class="required-field-block"> <input type="text" placeholder="Email" class="form-control"> <div class="required-icon"> <div class="text">*</div> </div> </div> <br> <div class="required-field-block"> <input type="text" placeholder="Facebook" class="form-control"> <div class="required-icon"> <div class="text">*</div> </div> </div> <br> <div class="required-field-block"> <input type="number" placeholder="เบอร์โทรศัพท์" class="form-control"> <div class="required-icon"> <div class="text">*</div> </div> </div> <br> <button class="btn btn-primary">บันทึก</button> </form> </div>
input, textarea, button { margin-top:10px } /* Required field START */ .required-field-block { position: relative; } .required-field-block .required-icon { display: inline-block; vertical-align: middle; margin: -0.25em 0.25em 0em; background-color: #E8E8E8; border-color: #E8E8E8; padding: 0.5em 0.8em; color: rgba(0, 0, 0, 0.65); text-transform: uppercase; font-weight: normal; border-radius: 0.325em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -webkit-transition: background 0.1s linear; -moz-transition: background 0.1s linear; transition: background 0.1s linear; font-size: 75%; } .required-field-block .required-icon { background-color: transparent; position: absolute; top: 0em; right: 0em; z-index: 10; margin: 0em; width: 30px; height: 30px; padding: 0em; text-align: center; -webkit-transition: color 0.2s ease; -moz-transition: color 0.2s ease; transition: color 0.2s ease; } .required-field-block .required-icon:after { position: absolute; content: ""; right: 1px; top: 1px; z-index: -1; width: 0em; height: 0em; border-top: 0em solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 0em solid transparent; border-right-color: inherit; -webkit-transition: border-color 0.2s ease; -moz-transition: border-color 0.2s ease; transition: border-color 0.2s ease; } .required-field-block .required-icon .text { color: #B80000; font-size: 26px; margin: -3px 0 0 12px; } /* Required field END */

Related: See More


Questions / Comments: