html – CSS伪元素input-placeholder :: after在文本框中显示有无值

概述我试图在验证后使用占位符伪元素(从文本框开始)为用户获取表格元素上的一些UI标记.我想要的是:: input-placeholder :: after伪元素,当文本框中既有值也有文本框中没有值时(例如,当存在无效值时)或者当需要一个值时 – 应该通过:: input-placeholder :: after伪元素在文本框的最右侧显示红色“X”. 这是小提琴： https://jsfiddle.ne 我试图在验证后使用占位符伪元素(从文本框开始)为用户获取表格元素上的一些UI标记.我想要的是:: input-placeholder :: after伪元素,当文本框中既有值也有文本框中没有值时(例如,当存在无效值时)或者当需要一个值时 – 应该通过:: input-placeholder :: after伪元素在文本框的最右侧显示红色“X”.

这是小提琴：
https://jsfiddle.net/edsinek/L8u7s25d/

这是我用来显示无效值“X”的CSS片段：

.input-invalID input[type=text]::-webkit-input-placeholder::after {  content: "16"; // "X"  Font-size: 18px;  color: #ff0000;  padding-right: 0;  float: right;}

注意：我目前只对Chrome进行编码,因此请原谅webkit特定的内容.

有任何想法吗？或者这是不可能的事情并且依赖于UA？

解决方法 原始答案:(在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",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",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.12); } .input-focused:not(.input-invalID) label {   color: rgb(16,108,200); } .input-focused:not(.input-invalID) input[type=text] {   border-color: rgb(16,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: "16";   /* "X" */   Font-size: 18px;   color: #ff0000;   padding-right: 0;   float: right; } .input-valID input[type=text]::-webkit-input-placeholder::after {   content: "14";   /* 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 >  <div >    <div >      <label for="merchantAddress">Merchant Address</label>      <input type="text"  ID="merchantAddress" placeholder="Merchant Address" />    </div>    <div >      <label for="merchantCity">Merchant City</label>      <input type="text"  ID="merchantCity" placeholder="Merchant City" value="" />    </div>    <div >      <label for="merchantState">Merchant State Code</label>      <input type="text"  ID="merchantState" placeholder="Merchant State Code" value="" />    </div>    <div >      <label for="merchantZip">Merchant Zip Code</label>      <input type="text"  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,但假设这是基于在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",function() {    $(this).closest("div.input-container").addClass("input-focused");    placeholder = $(this).prop("placeholder");    $(this).prop("placeholder"," ");  }).on("blur",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",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.12);}.input-focused:not(.input-invalID) label {  color: rgb(16,200);}.input-focused:not(.input-invalID) input[type=text] {  border-color: rgb(16,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: "16";  /* "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: "14";  /* 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 >  <div >    <div >      <label for="merchantAddress">Merchant Address</label>      <input type="text"  ID="merchantAddress" placeholder="Merchant Address" />    </div>    <div >      <label for="merchantCity">Merchant City</label>      <input type="text"  ID="merchantCity" placeholder="Merchant City" value="" />    </div>    <div >      <label for="merchantState">Merchant State Code</label>      <input type="text"  ID="merchantState" placeholder="Merchant State Code" value="" />    </div>    <div >      <label for="merchantZip">Merchant Zip Code</label>      <input type="text"  ID="merchantZip" placeholder="Merchant Zip Code" value="Bad Data" />    </div>  </div></div>

总结

以上是内存溢出为你收集整理的html – CSS伪元素input-placeholder :: after在文本框中显示有无值全部内容，希望文章能够帮你解决html – CSS伪元素input-placeholder :: after在文本框中显示有无值所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。