Question

此刻我正在使用Google Chrome浏览器，这很重要。

我有一些CSS和jQuery创建可爱的“占位符”（实际上是标签，但它们开始看起来像占位符）并动画化为标签。这是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");
    }
});

因此，除了“日期”以外，所有输入类型均能正常工作。如果我没有在日期输入上放置必需的标签，它会重叠并且看起来很糟糕。但是，我在CSS或jquery中找不到任何会导致这种情况发生的东西。有想法吗？

我已经更改了目标类，但是什么也没做。我在事物上添加了！important标签，这使情况变得更糟。我真的不知道是什么原因造成的。

奖励积分，如果您知道如何使其在Edge /其他浏览器上都能正常使用。但是，我并没有花很多时间尝试使这部分工作，所以我对此不太担心。

Answer 1

嘿，您可以更改默认的日期输入行为，使其像文本输入一样。

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

Answer 2

要获得预期的结果，请在输入日期字段的CSS下方添加 content null和::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>

CSS在输入时需要必需的标签，但不应

2 个答案: