自定義輸入類型日期

Question

我有一個輸入類型日期，如下圖所示：

我想只在夏季網絡中刪除帶有上下按鈕的按鈕，用於更改日期的每個部分。

並且還顯示整個日期，因為由於按鈕的位置而使文本縮短了一半。

我在底部提供了可編輯的代碼以方便使用。

<input type="date" id="sender_ad_date" name="sender[ad][date]" required="required" class="date" data-role="date" value="31-12-1969">

筆編輯輸入類型日期

我知道這是一個簡單的問題，但不是要這樣做。 請幫我。

我尚未出現打開日歷的箭頭。 不，實際上我也必須編輯它的顏色。

更新

在miguel的幫助下，我可以使用此代碼獲得一些幫助，但是日歷箭頭旁邊有一些內容，這可以保證一段文本。

.date{
  width: 100px;
}

input[type="date"]::-webkit-inner-spin-button {
  display: none;
}

input[type="date"]::-webkit-calendar-picker-indicator{
  background: none;
  padding: 0;
}

Answer 1

通常，我會使用容器隱藏不需要的部分來做類似的事情。之所以使用它而不是CSS，是因為跨瀏覽器兼容

 .container{ width: 90px; overflow: hidden; border: 1px solid black; } .date{ width: 125px; border: 0px none transparent; } 

 <div class="container"> <input type="date" id="sender_ad_date" name="sender[ad][date]" required="required" class="date" data-role="date" value="31-12-1969"> </div> 

如果您想嘗試CSS，請訪問以下鏈接... http://qnimate.com/guide-to-styling-html5-input-elements/

 .date{ width: 90px; paddi } .date::-webkit-calendar-picker-indicator, .date::-webkit-inner-spin-button { display: none; } 

 <input type="date" id="sender_ad_date" name="sender[ad][date]" required="required" class="date" data-role="date" value="31-12-1969">