那些遇到过的问题

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

Ed *_*nek 6 html css google-chrome pseudo-element

我试图在验证后使用占位符伪元素(从文本框开始)为用户获取表单元素上的一些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: "\2716"; // "X"
  font-size: 18px;
  color: #ff0000;
  padding-right: 0;
  float: right;
}
Run Code Online (Sandbox Code Playgroud)

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

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

Har*_*rry 8

原始答案:(在Chrome v47及更高版本中无效+)

当您开始在文本框中键入内容时,::-webkit-input-placeholder元素的可见性将设置为hidden.要::after在输入框有值时显示其元素,我们需要覆盖它并设置visibility为visible.

.input-invalid input[type=text]::-webkit-input-placeholder::after {
  visibility: visible;
}
Run Code Online (Sandbox Code Playgroud) 

    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();
Run Code Online (Sandbox Code Playgroud) 
 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;
 }
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

注意:我不建议为此目的使用占位符伪元素或其子伪元素,但如果您仍希望继续,则上述答案对您有用.

+为什么上述功能无法在Chrome v47及更高版本中使用？

正如Pete Talks Web在评论中指出的那样,上述内容似乎不适用于Chrome v47,而它适用于Chrome v43.这似乎是因为::-webkit-input-placeholder一旦键入文本后占位符伪元素()的隐藏方式存在关键差异.在v43中,该visibility属性用于隐藏它,而在v47中,它似乎display:none是使用的.我无法访问v47,但假设这是基于在Opera中观察到的也使用WebKit的行为.一个!important也被添加到它.这个以及将属性添加为内联样式的事实意味着不可能仅使用CSS来覆盖它.UA的阴影DOM元素也无法通过JS访问,因此一旦键入文本,就无法使伪元素可见.

最新的Chrome会发生什么？

在Chrome v50.0.2638.0 dev-m中,提供的小提琴本身不起作用.也就是说,不会显示十字标记和刻度标记.似乎WebKit已经开始抑制伪元素的添加::-webkit-input-placeholder.这是我一直期待发生的一件事,这正是我在答案中添加该注释的原因.

替代解决方案:

另一种解决方案是将伪元素添加到包装器div并将其定位为apt.在下面的片段中,我已经input将伪元素更改为内联块,相对定位伪元素并向其添加负片margin-left.这些使它出现在输入框的右边缘附近.(我还添加width: 100%了它label以使其跨越整条线.)

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();
Run Code Online (Sandbox Code Playgroud) 
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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

  • @ Ed.S.:在Chrome v50中,`:: - webkit-input-placeholder :: after`元素根本不产生任何输出.即使在启用*shadow DOM display*选项的情况下检查元素,它也不会显示该元素.因此,从该版本的Chrome看起来,我们将不允许将伪元素附加到`:: - webkit-input-placeholder`元素.UA使用的影子DOM元素(像这一样)通常不应该被用户以任何方式修改,因此我预计在某些时候,他们将不允许附加伪的选项. (2认同)
  • 好答案.看起来Chrome正在阻止我们故意为活动占位符设置样式.我认为这可能是Chrome的一个"可访问性决定",以保护我们自己.现在Chrome拥有市场份额,他们正在重复IE在决定网络外观时所犯的所有错误. (2认同)

归档时间：

查看次数：

10719 次

最近记录：

10 年，3 月 前
是否可以通过父文档访问Shadow DOM元素？ 29
更多相关链接
相关归档
图像上的工具提示 119
服务工作者正在缓存文件但从未触发获取事件 45
通过Chrome扩展程序将文件上传为表单数据 28
用&nbsp;替换空格 24
在Internet Explorer 7中的css背景大小封面 16
iOS需要双击一个简单的链接元素 16
目标safari css,但不是chrome 7
我们如何使用selenium/TestNg禁用chrome浏览器的Web安全性 7
画布中的抗锯齿大文本 6
Chrome window.open 显示失败 - 网络错误 5
难疑归档
如何在Python中安全地创建嵌套目录？ 3909
使用Git将我的最后一次X提交压缩在一起 3294
如何将Git托管项目中的所有本地更改还原到以前的状态？ 1830
用JavaScript比较两个日期 1791
如何在Bash中将变量设置为命令的输出？ 1513
如何在不注销并重新登录的情况下重新加载.bashrc？ 1510
如何使用jQuery获取元素的ID？ 1320
如何在git中按名称命名和检索存储？ 1276
对于Android Studio项目,我的.gitignore应该是什么？ 1210
在jQuery中序列化为JSON 1189