CSS requires required tag on input, but shouldn't

Question

I am working in Google Chrome at the moment, which is important.

I have some CSS and jQuery that create cute 'placeholders' (actually they're labels but they start off looking like placeholders) that animate into labels. Here is the codepen 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");
    }
});

So all of the input types work perfectly, except for 'date'. If I don't put the required tag on a date input, it overlaps and looks awful. However, I can't find anything in my css or jquery that would cause this to happen. Thoughts?

I've changed the targeted classes and that did nothing. I've added !important tags to things and it's made it worse. I really have no idea what could cause this.

Bonus points if you know how to make it work at all on Edge/other browsers. However, I haven't spent much time trying to get this part to work, so I'm less worried about it.

It is overwriting due to "required" parameter in html of without required tag. — Faseeh Haris, Sep 30 '19 at 18:56
possible duplicate of https://stackoverflow.com/questions/20321202/not-showing-placeholder-for-input-type-date-field — Naga Sai A, Sep 30 '19 at 19:22
Not a duplicate. I am not trying to get a placeholder to appear, I am hiding the 'mm/dd/yyyy' 'placeholder' when necessary and overlapping the label. The solution may be the same, but the issue itself is different. — HumanHickory, Oct 01 '19 at 13:08

Duarte Costa · Accepted Answer · 2019-09-30T19:18:39.900

3

Hey you can change the default date input behavior to act like a text input.

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

edited Sep 30 '19 at 19:18

answered Sep 30 '19 at 19:07

Duarte Costa

81
6

Wow this works perfectly. Any idea why the required tag would cause so much of an issue? – HumanHickory Sep 30 '19 at 19:15
The problem is related to the input type date already had a default placeholder – Duarte Costa Sep 30 '19 at 19:21
Yeah, I figured that. I just don't understand why the 'required' tag is such a big deal – HumanHickory Sep 30 '19 at 19:22

score 0 · Answer 2 · answered Sep 30 '19 at 19:08

To achieve expected result, add below CSS for input date field with content null and ::before selector

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

working code for reference - 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>

In the provided codepen and snippet, when you select a date, it won't appear in the input field. — Ramesh, Sep 30 '19 at 19:14

CSS requires required tag on input, but shouldn't

2 Answers2