將日期輸入三角形更改爲日曆圖標

Question

現在我正專注於在Google Chrome瀏覽器中將input[type="date"]顯示爲日曆圖標（.png），而不是默認使用的向下三角形。我試圖在輸入內部使用styling the Shadow elements做一些事情，但這需要我圍繞所有其他元素進行轉換，並且因爲這些元素使用的是flexbox，所以它看起來並不簡單。我期待着也一直顯示日曆圖標，但我還沒有想出一個辦法。

Answer 1

Here you go。

Chrome爲其日期選擇器提供了僞元素。我們可以使用::-webkit-calendar-picker-indicator以及上的另一個僞元素，即元素隱藏當前三角形並覆蓋我們選擇的PNG。

::-webkit-calendar-picker-indicator { 

    color: rgba(0, 0, 0, 0); 
    opacity: 1 
} 

::-webkit-calendar-picker-indicator::after { 

    content: ''; 
    display: block; 
    background: url(/*yourURLHere*/) no-repeat; 
    background-size: 10%; 
    width: 100px; 
    height: 100px; 
    position: absolute; 
    transform: translateX(-2%); 

} 

你可以調整定位和所有的自己，但是你必須通過它的alpha通道設置爲0，則指示要素即會之後增加一個僞元素做的是使當前指標明確主要的事情顯示你的PNG。

通過將opacity設置爲1，您也可以始終顯示該圖標。

Answer 2

更多的跨瀏覽器替代方法是將日曆圖標放在三角形日曆選取器指示器頂部，然後將日曆圖標設置爲pointer-events: none，這將導致所有點擊事件傳遞到下面的三角形日曆選取器指示器。我不完全確定日曆選取器指標在不同瀏覽器中的位置是否一致，但它應該非常相似。看下面的例子。

.sd-container { 
 
    position: relative; 
 
    float: left; 
 
} 
 

 
.sd { 
 
    padding: 5px 10px; 
 
    height: 30px; 
 
    width: 150px; 
 
} 
 

 
.open-button { 
 
    position: absolute; 
 
    top: 11px; 
 
    right: 3px; 
 
    width: 25px; 
 
    height: 25px; 
 
    background: #fff; 
 
    pointer-events: none; 
 
} 
 

 
.open-button button { 
 
    border: none; 
 
    background: transparent; 
 
}

<form> 
 
    <div class="sd-container"> 
 
    <input class="sd" type="date" name="selected_date" /> 
 
    <span class="open-button"> 
 
     <button type="button"></button> 
 
    </span> 
 
    </div> 
 
</form>

也有可能改變一些日期輸入字段的外觀（但不是日曆日期選擇器），因爲它的風格類似文本輸入字段。另外他們的一些WebKit的CSS屬性，這些屬性在這裏Are there any style options for the HTML5 Date picker?

Answer 3

下面的代碼對我的作品

input[type="date"]::-webkit-calendar-picker-indicator { 
 
    color: rgba(0, 0, 0, 0); 
 
    opacity: 1; 
 
    display: block; 
 
    background: url(https://mywildalberta.ca/images/GFX-MWA-Parks-Reservations.png) no-repeat; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-width: thin; 
 
}

<input type="date" />

Answer 4

@Aweary具有最好的例子，而Chrome 59沒有按」解釋t喜歡使用:: after :: - webkit-calendar-picker-indicator。所以這裏是我使用FontAwesome圖標進行的調整，以實現相同的目標。

input[type="date"] { 
 
    position: relative; 
 
    padding: 10px; 
 
} 
 

 
input[type="date"]::-webkit-calendar-picker-indicator { 
 
    color: transparent; 
 
    background: none; 
 
    z-index: 1; 
 
} 
 

 
input[type="date"]:before { 
 
    color: transparent; 
 
    background: none; 
 
    display: block; 
 
    font-family: 'FontAwesome'; 
 
    content: '\f073'; 
 
    /* This is the calendar icon in FontAwesome */ 
 
    width: 15px; 
 
    height: 20px; 
 
    position: absolute; 
 
    top: 12px; 
 
    right: 6px; 
 
    color: #999; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 

 
<input type="date">