CSS требует обязательного тега на входе, но не должен

Question

Я сейчас работаю в Google Chrome, что важно.

У меня есть несколько CSS и jQuery, которые создают симпатичные «заполнители» (на самом деле это ярлыки, но вначале они выглядят как заполнители), которыеоживить в метки. Вот кодовая ручка https://codepen.io/humanhickory/pen/KKPjgLe

//HTML

 <div class="form-group col-lg-6 field">
  <label for="FirstName" class="col-12">Date without Required tag</label>
  <input type="date" class="form-control col-12"/>
</div>

<div class="form-group col-lg-6 field">
  <label for="FirstName" class="col-12">Date With Required Tag</label>
  <input type="date" class="form-control col-12" required/>
</div>


//CSS

.field > input,
.field > label {
    position: relative;
    display: inline-block;
    width: 100%;
    transition: all 0.3s ease-in-out; /* adding animation */
}
.field > label {
    display: inline-block;
    margin: 0 auto;
    padding: 0 0 5px 7px;
    top: 36px;
    z-index: 1; /* placing label behind input */
}


form input[type="text"],
form input[type="email"],
form input[type="date"] {
    font-size: 1em;
    padding: 0 0 0 7px;
    z-index: 10;
    background: transparent; /* adding transparency */
}

.filled label {
    top: 0;
    font-size: 0.8em;
}

.form-group {
    margin-bottom: .5rem !important;
}


input[type="date"]::-webkit-datetime-edit {
    color: transparent;
    }

input[type="date"]:focus::-webkit-datetime-edit {
    color: black !important;
        }

input[type="date"]:valid::-webkit-datetime-edit {
    color: black;
    }

 //JQUERY

 $("form input").on("blur input focus", function() {
        var $field = $(this).closest(".field");
        if (this.value) {
            $field.addClass("filled");
        } else {
            $field.removeClass("filled");
        }
    });


    $("form input").on("focus", function() {
        var $field = $(this).closest(".field");
        if (this) {
            $field.addClass("filled");
        } else {
            $field.removeClass("filled");
        }
    }); 


$('.field > select').on("focus", function () {
    var $field = $(this).closest(".field");
    var $select = $(this).closest("select");

    if (this) {
        $field.addClass("filled");
        $select.removeClass("hiddenText");
    } else {
        $field.removeClass("filled");
    }
});

Так что все типы ввода работают отлично, за исключением даты. Если я не добавлю требуемый тег в поле ввода даты, он будет совпадать и выглядит ужасно. Тем не менее, я не могу найти ничего в моем CSS или JQuery, что может привести к этому. Мысли?

Я изменил целевые классы, и это ничего не сделало. Я добавил! Важные теги к вещам, и это сделало его еще хуже. Я действительно понятия не имею, что могло вызвать это.

Бонусные баллы, если вы знаете, как заставить его работать вообще в Edge / других браузерах. Однако я не потратил много времени, пытаясь заставить эту часть работать, поэтому я меньше беспокоюсь об этом.

Answer 1

Эй, вы можете изменить режим ввода даты по умолчанию, чтобы он действовал как текстовый ввод.

<input type="text" onfocus="(this.type='date')" onfocusout="(this.type='text')" class="form-control col-12"/>

Answer 2

Чтобы достичь ожидаемого результата, добавьте ниже CSS для поля ввода даты с содержимым пустым и ::before селектором

input[type="date"]::before { 
    content: '';
    width: 100%;
}

рабочим кодом для справки - https://codepen.io/nagasai/pen/zYOVZXX

$("input").attr('placeholder','');
$("form input").on("blur input focus", function() {
			var $field = $(this).closest(".field");
			if (this.value) {
				$field.addClass("filled");
			} else {
				$field.removeClass("filled");
			}
		});


		$("form input").on("focus", function() {
			var $field = $(this).closest(".field");
			if (this) {
				$field.addClass("filled");
			} else {
				$field.removeClass("filled");
			}
		});	
		
		
    $('.field > select').on("focus", function () {
        var $field = $(this).closest(".field");
        var $select = $(this).closest("select");

        if (this) {
            $field.addClass("filled");
            $select.removeClass("hiddenText");
        } else {
            $field.removeClass("filled");
        }
    });

/*originally "form input" and "form label" rather than ".field > XXX" */
.field > input,
.field > label {
    position: relative;
    display: inline-block;
    width: 100%;
    transition: all 0.3s ease-in-out; /* adding animation */
}
/*originally "form label" rather than ".field > label" */
.field > label {
    display: inline-block;
    margin: 0 auto;
    padding: 0 0 5px 7px;
    top: 36px;
    z-index: 1; /* placing label behind input */
}


form input[type="text"],
form input[type="email"],
form input[type="date"] {
    font-size: 1em;
    padding: 0 0 0 7px;
    z-index: 10;
    background: transparent; /* adding transparency */
}

.filled label {
    top: 0;
    font-size: 0.8em;
}

.form-group {
    margin-bottom: .5rem !important;
}



	
input[type="date"]::-webkit-datetime-edit {
	color: transparent;
    }

input[type="date"]:focus::-webkit-datetime-edit {
	color: black !important;
        }

input[type="date"]:valid::-webkit-datetime-edit {
	color: black;
    }


input[type="date"]::before { 
	content: '';
	width: 100%;
}

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<form>
<div class="form-group col-lg-6 field">
  <label for="FirstName" class="col-12">First Name</label>
  <input type="text" class="form-control col-12"/>
</div>
  
 <div class="form-group col-lg-6 field">
  <label for="FirstName" class="col-12">Date without Required tag</label>
  <input type="date" class="form-control col-12"/>
</div>

  
<div class="form-group col-lg-6 field">
  <label for="FirstName" class="col-12">Date With Required Tag</label>
  <input type="date" class="form-control col-12" required/>
</div>
  
</form>