自定義物料樣式輸入與標籤不工作

我創建了一個帶有標籤的材料設計樣式輸入表單，這裏是一個JSfiddle demo它似乎工作正常，但它只適用於當我在輸入標籤中添加required，如果我刪除required從輸入它停止工作，不知道爲什麼，有人可以請看看它？自定義物料樣式輸入與標籤不工作

在此先感謝。

.ttl{ 
 
    font-size:16px; 
 
    margin:10px 0; 
 
} 
 
.form-row:nth-child(1){ 
 
    margin-top:50px; 
 
} 
 
.form-row { 
 
    margin-top: 20px; 
 
    margin-bottom: 20px; 
 
    float: left; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 
.form-group input { 
 
    height: 2.5rem; 
 
} 
 
.form-group .control-label { 
 
    position: absolute; 
 
    top: 0.25rem; 
 
    pointer-events: none; 
 
    padding-left: 0.125rem; 
 
    z-index: 1; 
 
    color: #696969; 
 
    font-size: 1.750rem; 
 
    font-weight: normal; 
 
    -webkit-transition: all 0.28s ease; 
 
    transition: all 0.28s ease; 
 
    font-family: 'Montserrat-Regular'; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 
.form-group .bar { 
 
    position: relative; 
 
    border-bottom: 0.0625rem solid #999; 
 
    display: block; 
 
} 
 
.form-group .bar::before { 
 
    content: ''; 
 
    height: 0.125rem; 
 
    width: 0; 
 
    left: 50%; 
 
    bottom: -0.0625rem; 
 
    position: absolute; 
 
    background: #40b8f1; 
 
    -webkit-transition: left 0.28s ease, width 0.28s ease; 
 
    transition: left 0.28s ease, width 0.28s ease; 
 
    z-index: 2; 
 
} 
 
.form-group input, .form-group textarea { 
 
    display: block; 
 
    background: none; 
 
    padding: 0.125rem 0.125rem 0.0625rem; 
 
    font-size: 1.750rem; 
 
    border-width: 0; 
 
    border-color: transparent; 
 
    line-height: 2; 
 
    width: 100%; 
 
    color: transparent; 
 
    -webkit-transition: all 0.28s ease; 
 
    transition: all 0.28s ease; 
 
    box-shadow: none; 
 
    text-align: center; 
 
} 
 
.form-group select ~ .control-label, .form-group input:focus ~ .control-label, .form-group input:valid ~ .control-label, .form-group input.form-file ~ .control-label, .form-group input.has-value ~ .control-label, .form-group textarea:focus ~ .control-label, .form-group textarea:valid ~ .control-label, .form-group textarea.form-file ~ .control-label, .form-group textarea.has-value ~ .control-label { 
 
    font-size: 1.750rem; 
 
    color: gray; 
 
    top: -2.750rem; 
 
    left: 0; 
 
} 
 
.form-group select:focus ~ .bar::before, .form-group input:focus ~ .bar::before, .form-group textarea:focus ~ .bar::before { 
 
    width: 100%; 
 
    left: 0; 
 
}

<p class="ttl">Without required it doesn't work</p> 
 
<div class="form-row"> 
 
    <div class="form-group"> 
 
    <input type="text" name="student"> 
 
    <label for="input" class="control-label">Label Title here</label> 
 
    <i class="bar"></i> 
 
    </div> 
 
</div> 
 
<p class="ttl">With required it works</p> 
 
<div class="form-row"> 
 
    <div class="form-group"> 
 
    <input required type="text" name="student"> 
 
    <label for="input" class="control-label">Label Title here</label> 
 
    <i class="bar"></i> 
 
    </div> 
 
</div>

來源

2016-12-02 Sanjeev Kumar

有效輸入需要被需要的領域 –

從輸入的風格除去.form-group input:valid ~ .control-label集中

更改爲這

.form-group select ~ .control-label, .form-group input:focus ~ .control-label, .form-group input.form-file ~ .control-label, .form-group input.has-value ~ .control-label, .form-group textarea:focus ~ .control-label, .form-group textarea:valid ~ .control-label, .form-group textarea.form-file ~ .control-label, .form-group textarea.has-value ~  .control-label { 
font-size: 1.750rem; 
color: gray; 
top: -2.750rem; 
left: 0; 
}

https://jsfiddle.net/fy577w6b/3/

或者添加樣式的對照ol標籤輸入無效時。

來源

2016-12-02 05:38:54 XYZ

由於其做工精細，我只是沒有注意到這一點有效部分 –

應用更改後，出現了新的問題，即當輸入值在標籤被重疊的輸入值和修正此我不得不寫2行的jquery，即$（「形式的基團>輸入」）。事件的內容（功能（）{ \t \t如果（ $（this）.val（）。length> 0）{\t \t \t \t \t \t $（this）.next（「label」）。addClass（「frm-top」）; \t \t \t}其他{ \t \t \t \t $（本）。接下來（「標籤」）removeClass（「FRM頂」）。 \t \t} \t}）; –

只需添加以下CSS。

.form-group , .form-group input:valid ~ .control-label{top:0;} 
.form-group input:focus ~ .control-label{top: -2.750rem;}

.ttl{font-size:16px; margin:10px 0;} 
 
.form-row:nth-child(1){margin-top:50px;} 
 
.form-row { 
 
margin-top: 20px; 
 
    margin-bottom: 20px; 
 
float: left; 
 
width: 100%; 
 
position: relative; 
 
} 
 
.form-group input { 
 
height: 2.5rem; 
 
} 
 
.form-group .control-label { 
 
position: absolute; 
 
top: 0.25rem; 
 
pointer-events: none; 
 
padding-left: 0.125rem; 
 
z-index: 1; 
 
color: #696969; 
 
font-size: 1.750rem; 
 
font-weight: normal; 
 
-webkit-transition: all 0.28s ease; 
 
transition: all 0.28s ease; 
 
font-family: 'Montserrat-Regular'; 
 
text-align: center; 
 
width: 100%; 
 
} 
 
.form-group .bar { 
 
position: relative; 
 
border-bottom: 0.0625rem solid #999; 
 
display: block; 
 
} 
 
.form-group .bar::before { 
 
content: ''; 
 
height: 0.125rem; 
 
width: 0; 
 
left: 50%; 
 
bottom: -0.0625rem; 
 
position: absolute; 
 
background: #40b8f1; 
 
-webkit-transition: left 0.28s ease, width 0.28s ease; 
 
transition: left 0.28s ease, width 0.28s ease; 
 
z-index: 2; 
 
} 
 
.form-group input, .form-group textarea { 
 
display: block; 
 
background: none; 
 
padding: 0.125rem 0.125rem 0.0625rem; 
 
font-size: 1.750rem; 
 
border-width: 0; 
 
border-color: transparent; 
 
line-height: 2; 
 
width: 100%; 
 
color: transparent; 
 
-webkit-transition: all 0.28s ease; 
 
transition: all 0.28s ease; 
 
box-shadow: none; 
 
text-align: center; 
 
} 
 
.form-group select ~ .control-label, .form-group input:focus ~ .control-label, .form-group input:valid ~ .control-label, .form-group input.form-file ~ .control-label, .form-group input.has-value ~ .control-label, .form-group textarea:focus ~ .control-label, .form-group textarea:valid ~ .control-label, .form-group textarea.form-file ~ .control-label, .form-group textarea.has-value ~ .control-label { 
 
font-size: 1.750rem; 
 
color: gray; 
 
top: 0; 
 
left: 0; 
 
} 
 
.form-group select:focus ~ .bar::before, .form-group input:focus ~ .bar::before, .form-group textarea:focus ~ .bar::before { 
 
width: 100%; 
 
left: 0; 
 
} 
 
    .form-group , .form-group input:valid ~ .control-label{top:0;} 
 
    .form-group input:focus ~ .control-label{top: -2.750rem;}

<p class="ttl">Without required it doesn't work</p> 
 
<div class="form-row"> 
 
    <div class="form-group"> 
 
<input type="text" name="student" required> 
 
<label for="input" class="control-label">Label Title here</label> 
 
<i class="bar"></i> </div> 
 
</div> 
 
<p class="ttl">With required it works</p> 
 
<div class="form-row"> 
 
    <div class="form-group"> 
 
<input required type="text" name="student" required> 
 
<label for="input" class="control-label">Label Title here</label> 
 
<i class="bar"></i> </div> 
 
</div>

來源

2016-12-02 05:45:31

自定義物料樣式輸入與標籤不工作

回答

相關問題