原始答案:(在Chrome v47及更高版本中无效)
当您开始在文本框中键入内容时,:: – webkit-input-placeholder元素的可见性设置为隐藏.要显示其:: after元素,即使输入框有值,我们也需要覆盖它并将可见性设置为可见.
.input-invalid input[type=text]::-webkit-input-placeholder::after {
visibility: visible;
}
var addFormFocusEventHandler = function() {
var placeholder;
// using the document syntax in case input & container added to DOM dynamically
$(document).on("focus", "div.input-container :input", function() {
$(this).closest("div.input-container").addClass("input-focused");
placeholder = $(this).prop("placeholder");
$(this).prop("placeholder", " ");
}).on("blur", "div.input-container :input", function() {
$(this).closest("div.input-container").removeClass("input-focused");
$(this).prop("placeholder", placeholder);
placeholder = "";
});
};
var addFormValueEventHandler = function() {
// using the document syntax in case input & container added to DOM dynamically
$(document).on("blur", "div.input-container :input", function() {
if ($(this).val()) {
$(this).closest("div.input-container").addClass("input-has-value");
} else {
$(this).closest("div.input-container").removeClass("input-has-value");
}
});
};
var initialize = function() {
addFormFocusEventHandler();
addFormValueEventHandler();
};
initialize();
label {
color: transparent;
display: block;
}
input[type=text] {
display: block;
border-width: 0 0 1px !important;
border-radius: 0;
border-style: solid;
border-color: rgba(0, 0, 0, 0.12);
}
.input-focused:not(.input-invalid) label {
color: rgb(16, 108, 200);
}
.input-focused:not(.input-invalid) input[type=text] {
border-color: rgb(16, 108, 200);
}
.input-has-value:not(.input-invalid):not(.input-focused) label {
color: #595959;
}
.input-invalid.input-focused label,
.input-invalid.input-has-value label {
color: #ff0000;
}
.input-invalid input[type=text] {
border-color: #ff0000;
}
.input-invalid input[type=text]::-webkit-input-placeholder {
color: #ff0000;
}
.input-invalid input[type=text]::-webkit-input-placeholder::after {
content: "\2716";
/* "X" */
font-size: 18px;
color: #ff0000;
padding-right: 0;
float: right;
}
.input-valid input[type=text]::-webkit-input-placeholder::after {
content: "\2714";
/* checkmark */
font-size: 18px;
color: #438D5B;
padding-right: 0;
float: right;
}
.input-invalid input[type=text]::-webkit-input-placeholder::after {
visibility: visible;
}
Merchant Address
Merchant City
Merchant State Code
Merchant Zip Code
Note: I would not recommend using the placeholder pseudo-element or its child pseudo-element for this purpose but then if you still wish to proceed the above answer would work for you.
为什么以上版本无法在Chrome v47及更高版本中使用?
正如Pete Talks Web在评论中指出的那样,上面的内容似乎不适用于Chrome v47,而它适用于Chrome v43.这似乎是因为在输入文本后如何隐藏占位符伪元素(:: – webkit-input-placeholder)的关键区别.在v43中,visibility属性用于隐藏它,而在v47中,它看起来像display:none.我无法访问v47,但假设这是基于在Opera中观察到的也使用WebKit的行为.还添加了!important.这个以及将属性添加为内联样式的事实意味着不可能仅使用CSS来覆盖它.因此,一旦输入文本,就无法使伪元素可见.
最新的Chrome会发生什么?
在Chrome v50.0.2638.0 dev-m中,提供的小提琴本身不起作用.也就是说,不会显示十字标记和刻度标记.似乎WebKit已经开始禁止向:: – webkit-input-placeholder添加伪元素.这是我一直期待发生的一件事,这正是我在答案中添加该注释的原因.
替代解决方案:
另一种解决方案是将伪元素添加到包装器div并将其定位为apt.在下面的片段中,我已将输入和伪元素更改为内联块,相对定位伪元素并向其添加负边距.这些使它出现在输入框的右边缘附近. (我还添加了宽度:标签的100%使其跨越整条线.)
var addFormFocusEventHandler = function() {
var placeholder;
// using the document syntax in case input & container added to DOM dynamically
$(document).on("focus", "div.input-container :input", function() {
$(this).closest("div.input-container").addClass("input-focused");
placeholder = $(this).prop("placeholder");
$(this).prop("placeholder", " ");
}).on("blur", "div.input-container :input", function() {
$(this).closest("div.input-container").removeClass("input-focused");
$(this).prop("placeholder", placeholder);
placeholder = "";
});
};
var addFormValueEventHandler = function() {
// using the document syntax in case input & container added to DOM dynamically
$(document).on("blur", "div.input-container :input", function() {
if ($(this).val()) {
$(this).closest("div.input-container").addClass("input-has-value");
} else {
$(this).closest("div.input-container").removeClass("input-has-value");
}
});
};
var initialize = function() {
addFormFocusEventHandler();
addFormValueEventHandler();
};
initialize();
label {
color: transparent;
display: block;
width: 100%; /* add this */
}
input[type=text] {
display: inline-block; /* modify this */
border-width: 0 0 1px !important;
border-radius: 0;
border-style: solid;
border-color: rgba(0, 0, 0, 0.12);
}
.input-focused:not(.input-invalid) label {
color: rgb(16, 108, 200);
}
.input-focused:not(.input-invalid) input[type=text] {
border-color: rgb(16, 108, 200);
}
.input-has-value:not(.input-invalid):not(.input-focused) label {
color: #595959;
}
.input-invalid.input-focused label,
.input-invalid.input-has-value label {
color: #ff0000;
}
.input-invalid input[type=text] {
border-color: #ff0000;
}
.input-invalid input[type=text]::-webkit-input-placeholder {
color: #ff0000;
}
.input-invalid::after { /* change the selector */
position: relative; /* add this */
display: inline-block; /* add this */
margin-left: -1em; /* add this */
content: "\2716"; /* "X" */
font-size: 18px;
color: #ff0000;
}
.input-valid::after {/* change the seletor */
position: relative; /* add this */
display: inline-block; /* add this */
margin-left: -1em; /* add this */
content: "\2714"; /* checkmark */
font-size: 18px;
color: #438D5B;
}
Merchant Address
Merchant City
Merchant State Code
Merchant Zip Code