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

Posted 2023-03-05

【中文标题】CSS 需要输入必需的标签，但不应该

【英文标题】：CSS requires required tag on input, but shouldn't

【发布时间】：2020-01-30 02:04:30

【问题描述】：

我目前在谷歌浏览器中工作，这很重要。

我有一些 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 中找不到任何会导致这种情况发生的东西。想法？

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

如果您知道如何使其在 Edge/其他浏览器上运行，您将获得奖励积分。但是，我没有花太多时间尝试让这部分工作，所以我不太担心。

【问题讨论】：

由于没有必需标签的html中的“必需”参数而被覆盖。

***.com/questions/20321202/…的可能重复

不是重复的。我不想让占位符出现，我会在必要时隐藏“mm/dd/yyyy”“占位符”并重叠标签。解决方案可能相同，但问题本身不同。

【参考方案1】：

您可以将默认日期输入行为更改为像文本输入一样。

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

【讨论】：

哇，这个效果很好。知道为什么所需的标签会引起这么多问题吗？

问题与输入类型日期已经有默认占位符有关

是的，我想到了。我只是不明白为什么“必需”标签如此重要

【参考方案2】：

为了达到预期的效果，在 content null 和 ::before 选择器的输入日期字段下面添加 CSS

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>

【讨论】：

在提供的codepen和sn-p中，当你选择一个日期时，它不会出现在输入字段中。