我创建了一个像这样的输入框:
但是当我使用只读输入框时,它不起作用。 这是我的工作片段:
.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!
答案 0 :(得分: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=" ">
<span class="floating-label">Enter Coupon Code</span>
</div>
答案 1 :(得分:0)
这是只读的,但是如果您尝试将此代码作为组件编写并在多个位置使用此代码,则下面的span标记已经采用了该类并在输入中显示,您应该使用javascript使其动态化,但是如果重复每次您应该更改span标签的类名时,都需要使用此代码。