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

Question

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

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

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>

Answer 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>