Question

我不知道如何解决这个问题。在我的HTML表单中，我有2个输入[type =“date”]`这样的字段：

<div class="search-wrapper">
  <div class="advanced-search">
    <form>
      <input type="text" placeholder="Dateiname">
      <input type="text" placeholder="Benutzer">
      <input type="date" placeholder="Erstelldatum">
      <input type="date" placeholder="Änderungsdatum">
      <textarea placeholder="Erste Zeile"></textarea>
      <select>
        <option disabled selected>Kategorie</option>
        <option>Rechnungen</option>
        <option>Notizen</option>
      </select>
      <select>
        <option disabled selected>Projekt</option>
      </select>
      <img id="advSearchSubmit" src="icons/search.png" />
    </form>
  </div>
</div>

相应的SCSS：

.search-wrapper {
  position: fixed;

  .advanced-search {
    display: none;
    float: right;
    width: 600px;
    padding: 40px 10px 10px 10px;
    background-color: $accent-color;
    color: $font-color-secondary;
    overflow: hidden;

    img {
      vertical-align: top;
      width: 25px;
      height: 25px;
      margin-top: 10px;
      cursor: pointer;
    }

    input[type="text"], input[type="date"], select, textarea {
      vertical-align: top;
      width: 110px;
      height: 25px;
      margin: 10px;
      padding: 2px;
      background: $data-background-color;
      color: #555;
      border: 1px solid $background-color;
      outline-color: $main-color;
      font-size: 100%;
    }

    textarea {
      height: 2em;
      width: 41.2em;
    }
  }
}

只要我在输入字段中输入日期，它就会向左移动并且不完全可见。当输入字段中没有输入任何内容以及输入内容时，它就是这样的：

Date Input Screenshot

如何解决此问题？

Answer 1

我自己设法解决了这个问题。我只需将width字段的input[type="date"]增加到至少120px

Answer 2

.search-wrapper和.advanced-search 缺少关闭大括号如果您在没有js

的情况下使用它，请删除display none属性

.search-wrapper {
  position: fixed;
}
  .advanced-search {

    float: right;
    width: 600px;
    padding: 40px 10px 10px 10px;
    background-color: $accent-color;
    color: $font-color-secondary;
    overflow: hidden;
  }
    img {
      vertical-align: top;
      width: 25px;
      height: 25px;
      margin-top: 10px;
      cursor: pointer;
    }

    input[type="text"], input[type="date"], select, textarea {
      vertical-align: top;
      width: 110px;
      height: 25px;
      margin: 10px;
      padding:0px 4px;
     box-sizing: border-box;
      padding: 2px;
      background: $data-background-color;
      color: #555;
      border: 1px solid $background-color;
      outline-color: $main-color;
      font-size: 100%;
    }
    input[type="date"]{

    width:140px;    }

    textarea {
      height: 2em;
      width: 41.2em;
    }

当我在其中输入数据时，HTML日期输入字段的内容向左移动

2 个答案: