标签CSS类在使用引导日期时间选择器后未将输入读取为空

时间:2020-03-12 06:08:58

标签: css bootstrap-4 tempus-dominus-datetimepicker

我有一个CSS类,在输入不再为空之后,标签应该过渡到顶部。使用 tempusdominus-bootstrap 并选择一个日期时,该日期不会注册为空,并且我的文本会重叠。

HTML

      <div class="col-lg-6">
        <div class="form-group">
          <div id="datetimepicker1" data-target-input="nearest">
            <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
              <input type="text" class="form-control-input" id="dob" name="dob" data-target="#datetimepicker1" />
              <label class="label-control" for="dob">Date Of Birth</label>
              <div class="input-group-text"><i class="fa fa-calendar"></i></div>
            </div>
          </div>
        </div>

CSS

.label-control {
    position: absolute;
    top: 0.8125rem;
    left: 1.375rem;
    color: #787976;
    opacity: 1;
    font: 400 0.875rem/1.375rem "Open Sans", sans-serif;
    cursor: text;
    transition: all 0.2s ease;
}

.form-control-input:focus + .label-control,
.form-control-input.notEmpty + .label-control,
.form-control-textarea:focus + .label-control,
.form-control-textarea.notEmpty + .label-control {
    top: 0.125rem;
    opacity: 1;
    font-size: 0.75rem;
    font-weight: 500;
}

.form-control-input,
.form-control-select {
    display: block; /* needed for proper display of the label in Firefox, IE, Edge */
    width: 100%;
    padding-top: 1.25rem;
    padding-bottom: 0.25rem;
    padding-left: 1.3125rem;
    border: 1px solid #dadada;
    border-radius: 0.25rem;
    background-color: #fff;
    color: #787976;
    font: 400 0.875rem/1.375rem "Open Sans", sans-serif;
    transition: all 0.2s;
    -webkit-appearance: none; /* removes inner shadow on form inputs on ios safari */
}

这是选择日期后的样子: https://i.imgur.com/d6FZHli.png

任何帮助将不胜感激!

0 个答案:

没有答案