html選擇標記如果選項更改添加樣式在選擇

Question

Iam創建表格like如果輸入創建值創建樣式input + lable但相同的選擇不工作。請給我解決方案。

這是HTML

https://jsfiddle.net/novj38wc/2/這裏代碼

Answer 1

請使用此代碼嘗試。

body { 
 
    background:#333; 
 
} 
 
.input-group { 
 
    position: relative; 
 
    padding: 16px 0; 
 
    margin: 0 16px; 
 
} 
 
.form-ctrl { 
 
    border-bottom: solid 1px #fff; 
 
    background: transparent; 
 
    padding: 8px; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    border-width: 0 0 1px 0; 
 
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif; 
 
    color: #fff; 
 
    outline:0; 
 
} 
 
.form-ctrl option { 
 
    color:#000; 
 
} 
 
.input-group label { 
 
    position: absolute; 
 
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif; 
 
    color: #fff; 
 
    font-size: 16px; 
 
    top: 23px; 
 
    left: 8px; 
 
    
 
    -webkit-transition: all 0.2s linear; 
 
    -moz-transition: all 0.2s linear; 
 
    transition: all 0.2s linear; 
 
} 
 

 
.input-group .form-ctrl:focus + label, 
 
.input-group .form-ctrl:valid + label { 
 
    font-size: 12px; 
 
    top: 5px; 
 
    color: rgba(255, 255, 255, .54) 
 
}

<div class="input-group"> 
 
    <input id="name" name="name" class="form-ctrl" type="text" required> 
 
    <label for="name">Your Name*</label> 
 
</div> 
 

 
<div class="input-group"> 
 
    <input id="Email" name="Email" type="text" class="form-ctrl" required> 
 
    <label for="Email">Your Email*</label> 
 
</div> 
 

 
<div class="input-group"> 
 
    <input id="ContactNo" name="ContactNo" type="text" class="form-ctrl" required> 
 
    <label for="ContactNo">Contact No*</label> 
 
</div> 
 

 
<div class="input-group"> 
 
    <select id="ContactType" name="ContactType" class="form-ctrl" required> 
 
    <option value=""></option> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
    </select> 
 
    
 
    <label for="ContactType">Contact Type*</label> 
 
</div> 
 

 
<div class="input-group"> 
 
    <input id="WebsiteUrl" name="WebsiteUrl" type="text" class="form-ctrl" required> 
 
    <label for="WebsiteUrl">Website Url*</label> 
 
</div>