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

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 选项时，它集中在顶部。见下图：

想修复只读和占位符问题！

Answer 1

这是只读的，但下面的 span 标签已经采用 class 并显示在输入上，如果您尝试将此代码编写为一个组件并在多个地方使用它，您应该使它动态化javascript 但如果您每次都重复此代码，您应该更改 class 跨度标签的名称。

Answer 2

使用 :read-only pseudo-selector 使占位符移动到顶部。

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

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

input focus placeholder top not working on input readonly and placeholder

html

css

focus

css-transitions