Html5 从日期输入中删除默认占位符答案

【问题标题】：Html5 remove default place holder from date inputHtml5 从日期输入中删除默认占位符
【发布时间】：2019-12-13 23:20:03
【问题描述】：

我正在构建一个包含日期输入的表单。我想删除日期格式的默认占位符并在其旁边附加一个图标。

html

<div class="row search-container">
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-body">
        <form class="form-inline" role="form">
          <div class="form-group">
            <input type="text" class="form-control input-sm" id="pref-search" placeholder="Titre, théâtre, quartier...">
          </div><!-- form group [search] -->
          <div class="form-group">
            <div class='input-group date' id='datetimepicker1'>
              <input type='date' class="form-control" placeholder="Date" />
            </div>
          </div>
          <div class="form-group">
            <select  class="form-control">
              <option selected="selected" value="">2 Pers</option>
              <option value="2">3 Pers</option>
              <option value="3">4 Pers</option>
            </select>
          </div> <!-- form group [rows] -->
          <div class="form-group">
            <select class="form-control">
              <option selected="selected" value="">Genre</option>
              <option value="2">Male</option>
              <option value="3">Femme</option>
            </select>
          </div> <!-- form group [rows] -->
          <button class="btn-search-submit"><i class="fa fa-search"></i></button>
        </form>
      </div>
    </div>
  </div>
</div>

sass

@import '../../styles/global/_variables.sass'

.container
  margin-top:30px

.filter-col
  padding-left:10px
  padding-right:10px

input, select
  border-top: 0
  border-right: 0
  border-left: 0
  border-bottom: 0
  border-radius: 0

  -webkit-box-shadow: none
  box-shadow: none

input:focus
  -webkit-box-shadow: none
  box-shadow: none
select:focus
  -webkit-box-shadow: none
  box-shadow: none

form
  width: auto
  height: 50px
  border-radius: 3px
  box-shadow: 10px 10px 20px 0 rgba(0, 0, 0, 0.15)
  background-color: #f8f8f8


.search-container
  margin-left: 75px

.btn-search-submit
  border: none
  font-size: 16px
  cursor: pointer
  width: 35px
  height: 35px
  border: none
  background-color: $base-red
  color: #fff
  border-radius: 3px
  margin-right: 10px
  margin-left: 15px


.form-inline
  background-color: #fff

有没有办法破解输入日期元素以访问默认占位符？

如何在此输入旁边添加图标？（Bootstrap 4 不再允许使用字形图标。）

【问题讨论】：

你在使用任何日期选择器吗？

标签： html twitter-bootstrap sass bootstrap-4

【解决方案1】：

你可以这样做

html

<input type="date" placeholder="Date" required>

css

input[type="date"]::before {
    color: #999999;
    content: attr(placeholder);
}
input[type="date"] {
    color: #ffffff;
}
input[type="date"]:focus,
input[type="date"]:valid {
    color: #666666;
}
input[type="date"]:focus::before,
input[type="date"]:valid::before {
    content: "" !important;
}

检查 codepen url - https://codepen.io/piyushjn/pen/eqyXaM

你可以给出字体图标，而不是content: attr(placeholder);。

【讨论】：