如何像段落一样设置日期选择器输入的样式？答案

【问题标题】：How to style a date-picker input like a paragraph?如何像段落一样设置日期选择器输入的样式？
【发布时间】：2026-02-26 21:50:01
【问题描述】：

我制作了一个小日历应用程序，可以在其中添加具有开始日期和重复设置的事件。所以它可以每天或每周或每月发生。如果您选择每日重复，则可以在此片段中看到文本。

现在我想知道是否可以像普通段落一样设置日期字段的样式，该段落仍然具有下拉日期选择器。我怎么能这样做？

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("d.m.Y")}}">
    <button type="button" id="dailyDismiss" class="close col-1" aria-label="Close" onclick="rrendClose();">
        <span aria-hidden="true">&times;</span>
    </button></p>
</div>

【问题讨论】：

只需要输入并使用css去除轮廓和填充，对吧？
是的，我想是的。我在 CSS 方面还有一些其他问题，因为它继承自其他一些元素，但我想我能够找到所有这些并设置正确的样式。谢谢： )

标签： javascript html css datepicker

【解决方案1】：

一些变化：

删除与文本框相关的样式（特别是边框和填充），然后使其“继承”字体样式。
showFullDaily 已切换为使用 display 属性而不是 visibility，因为后者虽然隐藏了可见的元素，但会在文本应有的位置留出空间，而显示则不会。
dailyText 已从 p 标签更改为 span，因为 1) p 标签不应相互嵌套，并且 2) span 是一个内联元素，因此它自然会继续流程而无需额外的样式.所有这些更改一起允许输入元素折叠并与段落一起流动。

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("d.m.Y")}}">
    <button type="button" id="dailyDismiss" class="close col-1" aria-label="Close" onclick="rrendClose();">
        <span aria-hidden="true">&times;</span>
    </button></p>
</div>

【讨论】：

【解决方案2】：

转到 CSS 并输入：

.row {

display: flex

}

【讨论】：