Currently, I am using Google Chrome which is vital for my work.
Utilizing CSS and jQuery, I have developed adorable 'placeholders' that transition into labels. You can view the codepen here.
//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");
}
});
All input types function perfectly except for 'date'. Without the required tag on a date input, it appears distorted. Despite thorough analysis, I cannot pinpoint any errors in my CSS or jQuery. Any suggestions?
I've attempted modifying the targeted classes and using !important tags with no success. The issue seems peculiar and eludes me completely.
If you have insights on how to make it compatible with Edge or other browsers, bonus points to you. While compatibility across browsers interests me, my primary focus lies elsewhere at the moment.