输入焦点占位符top不适用于输入只读和占位符

Question

我创建了一个像这样的输入框：

但是当我使用只读输入框时，它不起作用。 这是我的工作片段：

.myinput input:focus {
  outline: none;
}

.myinput {
  position: relative;
  width: 100%;
}

.myinput .inputText {
  width: 100%;
  outline: none;
  border: none;
  border-bottom: 1px solid #ccc;
  box-shadow: none !important;
  border-radius: unset !important;
}

.myinput .inputText:focus {
  border-color: #3399FF;
  border-width: medium medium 2px;
}

.myinput .floating-label {
  position: absolute;
  pointer-events: none;
  top: 25px;
  left: 0;
  transition: 0.2s ease all;
  color: #aaa;
}

.myinput input:focus~.floating-label,
.myinput input:not(:focus):valid~.floating-label,
.myinput input:not(:placeholder-shown):not(:focus):valid + .floating-label,{
  top: 0px;
  left: 0;
  font-size: 13px;
  opacity: 1;
  color: #3399FF;
}

<div class="myinput">
  <br>
  <input type="text" name="coupon" class="inputText" value="Test" placeholder="" readonly>
  <span class="floating-label">Enter Coupon Code</span>
</div>

当我从AddressLine2输入字段中删除required选项时，它集中在顶部。参见下图：

要修复只读和占位符isseus！

Answer 1

使用:read-only伪选择器使占位符移到顶部。

.myinput input:read-only + .floating-label

注意：您可以用相邻的兄弟~组合器替换常规的兄弟+组合器，因为.floating-label紧接在输入之后。

示例：

.myinput input:focus {
  outline: none;
}

.myinput {
  position: relative;
  width: 100%;
}

.myinput .inputText {
  width: 100%;
  outline: none;
  border: none;
  border-bottom: 1px solid #ccc;
  box-shadow: none !important;
  border-radius: unset !important;
}

.myinput .inputText:focus {
  border-color: #3399FF;
  border-width: medium medium 2px;
}

.myinput .floating-label {
  position: absolute;
  pointer-events: none;
  top: 25px;
  left: 0;
  transition: 0.2s ease all;
  color: #aaa;
}

.myinput input:focus + .floating-label,
.myinput input:not(:placeholder-shown):not(:focus):valid + .floating-label,
.myinput input:read-only + .floating-label {
  top: 0px;
  left: 0;
  font-size: 13px;
  opacity: 1;
  color: #3399FF;
}

<div class="myinput">
  <br>
  <input type="text" name="coupon" class="inputText" value="Read Only" placeholder="" readonly>
  <span class="floating-label">Enter Coupon Code</span>
</div>

<div class="myinput">
  <br>
  <input type="text" name="coupon" class="inputText" placeholder="&nbsp;">
  <span class="floating-label">Enter Coupon Code</span>
</div>

Answer 2

这是只读的，但是如果您尝试将此代码作为组件编写并在多个位置使用此代码，则下面的span标记已经采用了该类并在输入中显示，您应该使用javascript使其动态化，但是如果重复每次您应该更改span标签的类名时，都需要使用此代码。