如何使用HTML/CSS強調日期/時間<input>價值？

我想強調使用style="text-decoration: underline;"的<input type="date">領域，但似乎並沒有工作。是否有另一種方式來強調設置日期值？我也想申請這個時間。如何使用HTML/CSS強調日期/時間<input>價值？

注意我能申請font-weight和color性能，這些投入但不text-decoration

編輯

看來上面沒有什麼，我想實現一個足夠的解釋。

基本上是：

<input type="date">將產生15-02-17

我想是這樣的：

<input type="date" style="text-decoration: underline;">產生的下劃線15-02-17

但是，這是行不通的。有另一種方法嗎？

ANOTHER EDIT

優選地，溶液應被推廣到所有的瀏覽器。

來源

2017-02-15 jablesauce

請分享一下你已經嘗試到現在 –

它似乎工作，在鉻，ff和safari測試。 https://jsfiddle.net/sb45dcjd/ –

也適用於FF和Opera ...你能用一個能證明你的問題的例子來澄清你的問題嗎？ –

把這個代碼在CSS。

input::-webkit-datetime-edit-fields-wrapper { 
    text-decoration:underline; 
}

的日期標記是由不同的div和span標籤，這是由input::-webkit-datetime-edit-fields-wrapper在Chrome

編輯籠罩：例輸入的日期標籤在Chrome

來源

2017-02-15 11:02:35 Miles07

解決方案就像一個魅力。 – jablesauce

不上邊緣工作... – sol

@ovokuro但對於歌劇和IE11工作正常（樣式表單元素總是失敗在這裏或那裏，......你需要讓它走在一個點上。） –

我不知道，你可以風格<input type="date">與文字修飾。

不是最好的解決辦法，但你可以手動添加下劃線..

.wrap { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.wrap:after { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 2px; 
 
    left: 4px; 
 
    height: 1px; 
 
    width: 54%; 
 
    background: red; 
 
}

<div class="wrap"> 
 
    <input type="date"> 
 
</div>

CODEPEN

注意，你不能添加pseudoelement輸入，讓你」我們必須把它放在其他地方。

來源

2017-02-15 10:52:55 sol

?? 'input [type =「date」] { color：red; 文字修飾：強調 }' - ''工作正常... –

@GCyrillus這就是我想的第一件事。我在Chrome瀏覽器中查看，並且下劃線不存在。 https://jsfiddle.net/sol_b/onycfqo2/1/ – sol

很好的解決方案，以避免只針對webkit瀏覽器。 –

我affraid的HTML5輸入的可視化瀏覽器特定的（有點像字段集），這就是爲什麼text-decoration: underline;將無法正常工作。嘗試設置其顯示的日曆的樣式時，您也可能遇到問題。

我覺得你最好的選擇是使用插件。有很多，即：https://github.com/fengyuanchen/datepicker

此外，你可以編輯你的問題，並要求你想要做這個特定的瀏覽器，我敢肯定，我們可以找到所需的風格。

來源

2017-02-15 10:55:48 Gabriel

如何使用HTML/CSS強調日期/時間<input>價值？

回答

相關問題