Question

我想询问有关输入的干草家伙：关注CSS。我有一个有效的输入，当我想填充输入时，标签将过渡到顶部。当我使用谷歌浏览器时，input：focus工作得很好，但是当我使用mozilla时，输入内容没有任何变化。你有解决方案的人吗？

 <div class="form-input">
       <input type="text" id="fullname" class="form-textbox-ep" name="name" value="{name}" required>
       <label for="fullname" class="form-label-ep">Nama Perusahaan</label>
    </div>

        .form-textbox-ep
    {
        border: none;
        border-bottom: 1px solid #E2E2E2;
        font-weight: 400;
        height: 74px;
        width: 100%;
        font-size: 18px;
        color: #3B61AA !important;
        position: relative;
        line-height: 15px;
    }
    .form-textbox-ep:focus ~ .form-label,.form-textbox-ep:valid ~ .form-label-ep,.form-textbox-ep:read-only ~ .form-label-ep {
        top: 18px;
        left: 0;
        font-size: 13px;
        cursor: pointer;
    }

    .form-textbox-ep:focus,.form-textbox-ep:valid, .form-textbox-ep:read-only{
        padding-top: 25px;
    }
    .form-label-ep{
        position: absolute;
        top: 28px;
        left: 0;
        color: #000;
        cursor: text;
        transition: all .15s ease-in-out 0s;
        font-size: 15px;
        line-height: 15px;
    }

Answer 1

您的代码很忙，所以我用下面的代码重写您想要的结果。

.box {
  width: 300px;
  margin: 40px 3%;
  position: relative;
}

:focus {
  outline: none;
}

input[type="text"] {
  font: 15px/24px "Lato", Arial, sans-serif;
  color: #333;
  width: 100%;
  box-sizing: border-box;
  letter-spacing: 1px;
}

.effect {
  border: 0;
  padding: 4px 0;
  border-bottom: 1px solid #ccc;
  background-color: transparent;
}

.effect~.focus-border {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #3399ff;
  transition: 0.4s;
}

.effect:focus~.focus-border,
.has-content.effect-16~.focus-border {
  width: 100%;
  transition: 0.4s;
}

.effect~label {
  position: absolute;
  left: 0;
  width: 100%;
  top: 9px;
  color: #aaa;
  transition: 0.3s;
  z-index: -1;
  letter-spacing: 0.5px;
}

.effect:focus~label,
.has-content.effect-16~label {
  top: -16px;
  font-size: 12px;
  color: #3399ff;
  transition: 0.3s;
}

<div class="box">
  <div class="col-3 input-effect">
    <input class="effect" type="text" placeholder="">
    <label>First Name</label>
    <span class="focus-border"></span>
  </div>
</div>

输入的不同工作：关注chorme和mozilla之间的CSS

1 个答案: