代码之家 › 专栏 › 技术社区 › Shawn

输入焦点占位符top不处理输入只读

css-transitions focus css html

Shawn · 技术社区 · 5 年前

我创建了如下输入框:

以下是我的工作片段:

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

当我离开的时候 required 从AddressLine2输入字段的选项,它集中在顶部。见下图:

想要修复readonly和占位符isseus!

2 回复 | 直到 5 年前

Ori Drori 5 年前

使用 :read-only 移动顶部选择器以生成伪占位符。

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

注: 你可以替换普通同胞 ~ + combinator,自从 .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>

milad jamali 5 年前

这是只读的,但是下面的span标记已经获取了该类并显示在输入上如果您试图将此代码作为组件编写并在多个地方使用它,您应该使用javascript使其动态化,但是如果您每次都要重复此代码,您应该更改span标记的类名。

推荐文章

Alexandra Tupu · qt如何检查2个按键事件之间的时间戳差异

7 年前

Sameer · 如何关注react native组件中的下一个输入字段

7 年前

NESHOM · 使用控制台应用程序的QDialog没有任务栏条目

7 年前

Nicholas Miller · Windows窗体组合框将在选定项目之前窃取焦点

7 年前

SpaceDogCS · 无法强制关注输入

7 年前

Yuda · 如何将焦点从文本区域移到文本区域之外?

7 年前

giorgio79 · 如何关注设置为自动高度和溢出的contenteditable div中的元素?

7 年前

Maanstraat · jQuery focus textfield check单选按钮

7 年前

Jean-Cédric Hamel · 模糊后无法聚焦回输入字段

7 年前

shajan · 如何将焦点放在angular 2中的不同文本框上

7 年前