CSS文本过渡仅在HTML输入具有“ required”标签时才有效

debugcn 发表于 Dev

OrionGL

我以样式设置了文本输入字段，以便标签从框中开始，然后在焦点突出时向上滑动。但是，这仅适用于“必填”字段，所有其他字段在框上方已经具有标签。我该如何使这些行为像其他行为一样？

HTML：

        <div class="tGroup">
            <input  id="email" maxlength="80" name="email" size="20" type="text" required>
            <span class="bar"></span>
            <label for="email">Email</label>
        </div>
        
        <div class="tGroup">
            <input  id="company" maxlength="40" name="company" size="20" type="text" required>
            <span class="bar"></span>
            <label for="company">Company</label>
        </div>

        <div class="tGroup">
            <input  id="url" maxlength="80" name="url" size="20" type="text">
            <span class="bar"></span>
            <label for="url">Website</label>
        </div>

        <div class="tGroup">
            <input  id="city" maxlength="40" name="city" size="20" type="text">
            <span class="bar"></span>
            <label for="city">City</label>
        </div>

CSS：

.tGroup { 
    position:relative; 
    margin-bottom:45px; 
    float:left;
    margin-right: 40px;
}

.tGroup input {
    font-size:.9em;
    padding:10px 0px;
    display:block;
    width:300px;
    border:none;
    color: #fff;
    background-color: transparent;
    border-bottom:1px solid #757575;
}

.tGroup input:focus { outline:none; }

.tGroup label {
    color:rgb(255, 255, 255); 
    font-size: .9em;
    font-weight:normal;
    position:absolute;
    pointer-events:none;
    top:10px;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
}
  
/* active state */
.tGroup input:focus ~ label, input:valid ~ label {
    top:-20px;
}

约翰·科米尼

问题在于，input:valid ~ label因为您说的是要让有效的输入在标签上应用了该特定样式，但是由于后两个没有必需的属性，因此不会对其进行分类。您可以删除它。

body{
  background:black;
}
.tGroup { 
    position:relative; 
    margin-bottom:45px; 
    float:left;
    margin-right: 40px;
     margin-top: 30px;
}

.tGroup input {
    font-size:.9em;
    padding:10px 0px;
    display:block;
    width:300px;
    border:none;
    color: #fff;
    background-color: transparent;
    border-bottom:1px solid #757575;
}

.tGroup input:focus { outline:none; }

.tGroup label {
    color:rgb(255, 255, 255); 
    font-size: .9em;
    font-weight:normal;
    position:absolute;
    pointer-events:none;
    top:10px;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
}
  
/* active state */
.tGroup input:focus ~ label  {
    top:-20px;
}

<div class="tGroup">
            <input  id="email" maxlength="80" name="email" size="20" type="text" required>
            <span class="bar"></span>
            <label for="email">Email</label>
        </div>
        
        <div class="tGroup">
            <input  id="company" maxlength="40" name="company" size="20" type="text" required>
            <span class="bar"></span>
            <label for="company">Company</label>
        </div>

        <div class="tGroup">
            <input  id="url" maxlength="40" name="url" size="20" type="text">
            <span class="bar"></span>
            <label for="url">Website</label>
        </div>

        <div class="tGroup">
            <input  id="city" maxlength="40" name="city" size="20" type="text">
            <span class="bar"></span>
            <label for="city">City</label>
        </div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。