HTML INPUT DATE TRIGGER POPUP

by wllai2001

HTML

<!--HTML INPUT DATE TRIGGER POPUP-->
<!--利用CSS讓Input Date右側讓月曆彈跳按鈕顯示到最大面積並設定為透明-->
<!--再把Input的背景設定為透明，把Input下面蓋住的按鈕顯示出來，誘導使用者去點擊，其實是點到Input本身-->
<div class="exmp-wrp">
  <div class="btn-wrp">
    <input type="date" class="btn-clck"/>
  </div>
  <button class="btn">Click me</button>
</div>

<label>sss</label>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.exmp-wrp {
    margin-top: 100px;
    position: relative;
    width: 200px;
}

.btn-wrp {
    border: 1px solid #dadada;
    display: inline-block;
    width: 100%;
    position: relative;
    z-index: 10;
}

.btn-clck {
    border: none;
    background: transparent;
    width: 100%;
    padding: 10px;
}

.btn-clck::-webkit-calendar-picker-indicator {
    right: -10px;
    position: absolute;
    width: 78px;
    height: 40px;
    color: rgba(204, 204, 204, 0);
    opacity: 0
}

.btn-clck::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.btn-clck::-webkit-clear-button {
    margin-right:75px;
 }
.btn {
    height: 100%;
    background: #fda200;
    border: none;
    color: #fff;
    padding: 13px;
    position: absolute;
    right: 0;
    top: 0;
}

JavaScript

$(function(){$("label").html("123")});