Question

有没有一种方法可以在输入元素的焦点上激活本地HTML5日期选择器下拉菜单？

大输入元素：

Large Input[type=date] Element

当前，我只能在单击输入元素最右侧的箭头时使用日历。

大输入元素单击箭头

Large Input[type=date] Element onClick of Arrow

我想在输入元素的焦点上激活此日历。

这是有问题的代码。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <style media="screen">
  .form-question {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 0 3rem;
    min-height: 3rem;
  }
  .form-question__title {
    color: #342357;
    font-size: 1.5rem;
    padding: 1rem;
  }
  .input-container {
    border-bottom: solid 2px #333333;
  }
  .input-container input {
    border: none;
    box-sizing: border-box;
    outline: 0;
    padding: .75rem;
    width: 100%;
  }
  </style>
  <body>
    <div class="form-question">
      <div class="form-question__title">
        <span>Effective Date</span>
      </div>
      <div class="input-container">
        <input id="effective-date" type="date" name="effective-date" minlength="1" maxlength="64" placeholder=" " autocomplete="nope" required="required"></input>
        <span class="bar"></span>
      </div>
    </div>
  </body>
</html>

首选CSS解决方案，但欢迎使用javascript，请不要使用jQuery。

谢谢！

Answer 1

对于任何偶然发现此问题的人，我将calendar-picker-indicator设置为输入的完整高度和宽度，从而解决了问题（仅 ~~webkit~~ firefox似乎也尊重这一点，{ {3}}。

.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;
}

here

Answer 2

    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;
    }

当输入[type =“ date”]成为焦点时如何显示日历弹出窗口

2 个答案: