第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在Chrome中顯示本機日期選擇器的方法

在Chrome中顯示本機日期選擇器的方法

<input type="date">當(dāng)瀏覽器不支持該字段時,我使用的字段會優(yōu)雅地回退到j(luò)Query。相對最近,Chrome開始提供本機日期選擇器,這很棒。但是我發(fā)現(xiàn)許多用戶都錯過了帶起日歷的小箭頭,因此錯過了一個易于選擇日期的日歷這一事實。為了使操作更直觀,當(dāng)用戶將焦點移至輸入或單擊其他元素(如小日歷圖標)時,我可以調(diào)出本機datepicker UI會很棒。我可以在Chrome中使用一種方法來觸發(fā)日期選擇器UI嗎?
查看完整描述

3 回答

?
犯罪嫌疑人X

TA貢獻2080條經(jīng)驗 獲得超4個贊

當(dāng)用戶單擊字段本身時,這是一種觸發(fā)日期選擇器的方法,因為不識字的計算機用戶不知道應(yīng)該單擊何處:


input[type="date"] {

    position: relative;

}


/* create a new arrow, because we are going to mess up the native one

see "List of symbols" below if you want another, you could also try to add a font-awesome icon.. */

input[type="date"]:after {

    content: "\25BC"; 

    color: #555;

    padding: 0 5px;

}


/* change color of symbol on hover */

input[type="date"]:hover:after {

    color: #bf1400;

}


/* make the native arrow invisible and stretch it over the whole field so you can click anywhere in the input field to trigger the native datepicker*/

input[type="date"]::-webkit-calendar-picker-indicator {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    width: auto;

    height: auto;

    color: transparent;

    background: transparent;

}


/* adjust increase/decrease button */

input[type="date"]::-webkit-inner-spin-button {

    z-index: 1;

}


 /* adjust clear button */

 input[type="date"]::-webkit-clear-button {

     z-index: 1;

 }

<input type="date">


查看完整回答
反對 回復(fù) 2019-11-18
  • 3 回答
  • 0 關(guān)注
  • 857 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號