输入的不同工作：专注于chrome和mozilla之间的css答案

【问题标题】：Different work of input:focus on css between chorme and mozilla输入的不同工作：专注于chrome和mozilla之间的css
【发布时间】：2019-08-09 04:31:52
【问题描述】：

我想问一下关于输入的问题：专注于 CSS。我有一个有效的输入，当我想填充输入时，标签将转换到顶部。当我使用谷歌浏览器时，输入：焦点工作得很好，但是当我使用 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;
    }

【问题讨论】：

能否包含与样式关联的 HTML 并制作一个 sn-p 以便于调试？
确定先生@Nimsrules

标签： css google-chrome mozilla

【解决方案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>

【讨论】：