html选择标记，如果选项更改在select中添加样式

Question

如果输入geting值创建样式input + lable但是相同的选择不起作用，则创建表单like 。请给我解决方案。

这是html

https://jsfiddle.net/novj38wc/2/此处代码

Answer 1

请尝试使用此代码。

＆＃13;

＆＃13;

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)
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;