对于任何遇到这个问题的人，我解决了这个问题（webkit only firefox似乎也尊重这一点），将calendar-picker-indicator设置为输入的全高和全宽，如here所示。

.input-container input {
    border: none;
    box-sizing: border-box;
    outline: 0;
    padding: .75rem;
    position: relative;
    width: 100%;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

个字符
Full-Width Clickable Calendar Dropdown的

单线解

<input type="date" onfocus="this.showPicker()">

字符串
工作类型“时间”和“日期时间本地”太

为什么不使用js

const inputDate = document.getElementById("inputId");

inputDate.addEventListener("focus",function (evt) {
  if (this.getAttribute("type")==="date") {
    this.showPicker();
  }
});

字符串

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

    /* create a new arrow, because we are going to mess up the native one
    see "List of symbols" below if you want another, you could also try to add a font-awesome icon.. */
    input[type="date"]:after {
        content: "\25BC"; 
        color: #555;
        padding: 0 5px;
    }

    /* change color of symbol on hover */
    input[type="date"]:hover:after {
        color: #bf1400;
    }

    /* make the native arrow invisible and stretch it over the whole field so you can click anywhere in the input field to trigger the native datepicker*/
    input[type="date"]::-webkit-calendar-picker-indicator {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        height: auto;
        color: transparent;
        background: transparent;
    }

    /* adjust increase/decrease button */
    input[type="date"]::-webkit-inner-spin-button {
        z-index: 1;
    }

    /* adjust clear button */
    input[type="date"]::-webkit-clear-button {
        z-index: 1;
    }

字符串

Pimped@MJ12358解决方案一点，所以图标被保留。

input {
    position: relative;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    background-position: right;
    background-size: auto;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    width: auto;
}

个字符

• 这个答案是为了给阿比德的当前答案添加细节。*

您可以使用showPicker API以编程方式显示常见浏览器实现中的选取器：
通常浏览器会针对下列类型的输入实作它：“日期”、“月”、“周”、“时间”、“本地日期时间”、“颜色”或“文件”。

document.querySelectorAll("button").forEach((button) => {
  button.addEventListener("click", (event) => {
    const input = event.srcElement.previousElementSibling;
    try {
      input.showPicker();
    } catch (error) {
      window.alert(error);
    }
  });
});

个字符
我还测试了隐藏的input，如上所示。选择器仍然成功显示。
请注意，有一些安全要求。最值得注意的是：

• 需要临时用户激活。用户必须与页面或UI元素进行交互，才能使此功能正常工作。
• 正如您在上面的示例代码中所看到的，它不适用于date输入，但仅适用于StackOverflow，因为它在iframe中：

注意：日期、日期时间-本地、月、时间、周的选取器以相同的方式启动。它们无法在此处显示，因为实时示例在跨源框架中运行，并且会导致SecurityError