我正在尝试在验证后为用户获取表单元素上的一些 UI 标记,以便使用占位符伪元素(从文本框开始)工作。我想要的是 ::input-placeholder::after
伪元素,当文本框中有值以及文本框中没有值时显示(例如,当存在无效值或需要值时 - 应通过 ::input-placeholder::after
伪元素在文本框的最右侧显示红色“X”。
这是 fiddle : https://jsfiddle.net/edsinek/L8u7s25d/
这是我用来显示无效值的“X”的 CSS 片段:
.input-invalid input[type=text]::-webkit-input-placeholder::after {
content: "\2716"; // "X"
font-size: 18px;
color: #ff0000;
padding-right: 0;
float: right;
}
注意:目前我只是在为 Chrome 编写代码,所以请原谅 webkit 特定的东西。
有什么想法吗?或者这是不可能的并且依赖于 UA?
最佳答案
原始答案:(不适用于 Chrome v47 及更高版本+)
当您开始在文本框中键入内容时,::-webkit-input-placeholder
元素的可见性会设置为隐藏
。要在输入框有值时显示其 ::after
元素,我们需要覆盖它并将 visibility
设置为 visible
。
.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;
}
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12 input-container input-required">
<label for="merchantAddress">Merchant Address</label>
<input type="text" class="full-width" id="merchantAddress" placeholder="Merchant Address" />
</div>
<div class="col-xs-12 input-container input-valid">
<label for="merchantCity">Merchant City</label>
<input type="text" class="full-width" id="merchantCity" placeholder="Merchant City" value="" />
</div>
<div class="col-xs-12 input-container input-invalid">
<label for="merchantState">Merchant State Code</label>
<input type="text" class="full-width" id="merchantState" placeholder="Merchant State Code" value="" />
</div>
<div class="col-xs-12 input-container input-invalid input-required">
<label for="merchantZip">Merchant Zip Code</label>
<input type="text" class="full-width" id="merchantZip" placeholder="Merchant Zip Code" value="Bad Data" />
</div>
</div>
</div>
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,但假设这是基于在也使用 WebKit 的 Opera 中观察到的行为。 !important
也被添加到其中。这一点以及该属性作为内联样式添加的事实意味着不可能单独使用 CSS 进行覆盖。 UA's shadow DOM elements cannot be accessed through JS also因此,一旦输入文本,就无法使伪元素可见。
最新的 Chrome 有什么变化?
在 Chrome v50.0.2638.0 dev-m 中,问题中提供的 fiddle 本身不起作用。也就是说,既不显示十字也不显示刻度线。似乎 WebKit 已经开始禁止向 ::-webkit-input-placeholder
添加伪元素。这是我一直期待发生的一件事,这正是我在回答中添加该注释的原因。
替代解决方案:
另一种解决方案是将伪元素添加到包装器 div
并将其定位为 apt。在下面的代码片段中,我将 input
和伪元素更改为 inline-block,相对定位伪元素并向其添加负 margin-left
。这些使它出现在输入框的右边缘附近。 (我还在 label
中添加了 width: 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;
}
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12 input-container input-required">
<label for="merchantAddress">Merchant Address</label>
<input type="text" class="full-width" id="merchantAddress" placeholder="Merchant Address" />
</div>
<div class="col-xs-12 input-container input-valid">
<label for="merchantCity">Merchant City</label>
<input type="text" class="full-width" id="merchantCity" placeholder="Merchant City" value="" />
</div>
<div class="col-xs-12 input-container input-invalid">
<label for="merchantState">Merchant State Code</label>
<input type="text" class="full-width" id="merchantState" placeholder="Merchant State Code" value="" />
</div>
<div class="col-xs-12 input-container input-invalid input-required">
<label for="merchantZip">Merchant Zip Code</label>
<input type="text" class="full-width" id="merchantZip" placeholder="Merchant Zip Code" value="Bad Data" />
</div>
</div>
</div>
关于html - CSS伪元素input-placeholder::after在文本框中显示有无值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35217144/