如何像段落一樣設置日期選擇器輸入的樣式？

Question

我制作了一個小日歷應用程序，可以在其中添加具有開始日期和重復設置的事件。 所以它可以每天或每周或每月發生。 如果您選擇每日重復，則在此片段中您可以看到文本。

現在我想知道是否可以像普通段落一樣設置日期字段的樣式，它仍然有一個下拉日期選擇器。 我怎么能這樣做？

 function rrendClose() { document.getElementById('dailyText').innerText = "Takes place every day."; document.getElementById('dailyEnddate').style.visibility = "collapse"; document.getElementById('dailyDismiss').style.visibility = "collapse"; document.getElementById('showFullDaily').style.visibility = "visible"; } function rrendOpen() { document.getElementById('dailyText').innerText = "Takes place every day, until"; document.getElementById('dailyEnddate').style.visibility = "visible"; document.getElementById('dailyDismiss').style.visibility = "visible"; document.getElementById('showFullDaily').style.visibility = "collapse"; }

 <div class="row"> <p class="pt-1"><p class="ml-3" id="dailyText">Takes place evry day, until</p> <a id="showFullDaily" class="link" onclick="rrendOpen();" style="visibility: collapse;" >Add enddate</a> <input name="rrend" class="col-5 form-control border border-dark auto-date" type="date" id="dailyEnddate" value="{{date("dmY")}}"> <button type="button" id="dailyDismiss" class="close col-1" aria-label="Close" onclick="rrendClose();"> <span aria-hidden="true">&times;</span> </button></p> </div>

Answer 1

一些變化：

• 刪除與文本框相關的 styles（特別是邊框和填充），然后使其“繼承”字體 styles。
• showFullDaily被切換為使用display屬性而不是visibility ，因為后者雖然隱藏了可見的元素，但在文本應該存在的地方留下了空間，而 display 沒有。
• dailyText從p標簽更改為span ，因為 1） p標簽不應該相互嵌套，2） span是一個內聯元素，所以它自然會繼續流程而無需額外的 styles。 所有這些更改一起允許輸入元素折疊並與段落一起流動。

 function rrendClose() { document.getElementById('dailyText').innerText = "Takes place every day."; document.getElementById('dailyEnddate').style.visibility = "collapse"; document.getElementById('dailyDismiss').style.visibility = "collapse"; document.getElementById('showFullDaily').style.display = "block"; } function rrendOpen() { document.getElementById('dailyText').innerText = "Takes place every day, until"; document.getElementById('dailyEnddate').style.visibility = "visible"; document.getElementById('dailyDismiss').style.visibility = "visible"; document.getElementById('showFullDaily').style.display = "none"; }

 #dailyEnddate { border: none; padding: 0; font-family: inherit; font-size: inherit; }

 <div class="row"> <p class="pt-1"><span class="ml-3" id="dailyText">Takes place evry day, until</span> <a id="showFullDaily" class="link" onclick="rrendOpen();" style="display: none;" >Add enddate</a> <input name="rrend" class="col-5 form-control border border-dark auto-date" type="date" id="dailyEnddate" value="{{date("dmY")}}"> <button type="button" id="dailyDismiss" class="close col-1" aria-label="Close" onclick="rrendClose();"> <span aria-hidden="true">&times;</span> </button></p> </div>

Answer 2

Go 到 CSS 和類型：

.row {

display: flex

}