6

我是一名开源开发人员，并使用我的 web 框架 ( http://mmm.sf.net ) 开发纯 HTML5 和 CSS3。我想通过输入绘制一个验证错误图标：CSS 中的无效规则与右侧对齐。但它仅适用于 FF，但不适用于基于 webkit 的浏览器，例如 Chrome 或 Safari。我创建了一个最小的独立 html（没有验证和：invalid）用于测试：

<!DOCTYPE HTML>
<html>
  <head>
  <style type="text/css">
  <!--
input {
  border-color: #ff2222;
  background-color: #ff8888;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em'><g><circle cx ='8' cy ='8' r ='8' style='fill:%23ff0000;stroke:none'/><text x='6' y='13' style='font-size:14px;fill:%23ffffff;stroke:none;font-family:Monospaced;font-weight:bold'>!</text></g></svg>");
  background-repeat: no-repeat;
  /* background-size: auto; */
  background-position: 98% 50%;
}
  -->
  </style>
  </head>
  <body>
    <input type="text" placeholder="type here" />
  </body>
</html>

有任何想法吗？

4

1 回答 1

9

您可以尝试对 svg 背景图像进行base64编码的数据 uri。

这是它在 CSS 中的样子：

input {
  border-color: #ff2222;
  background-color: #ff8888;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij48Zz48Y2lyY2xlIGN4PSI4IiBjeT0iOCIgcj0iOCIgZmlsbD0iI2ZmMDAwMCIgc3Ryb2tlPSJub25lIiAvPjx0ZXh0IHg9IjYiIHk9IjEzIiBzdHlsZT0iZm9udC1zaXplOiAxNHB4OyBmb250LWZhbWlseTogU2Fucy1zZXJpZjsgZm9udC13ZWlnaHQ6IGJvbGQ7IHN0cm9rZTogbm9uZTsgZmlsbDogI2ZmZmZmZjsiPiE8L3RleHQ+PC9nPjwvc3ZnPg==");
  background-repeat: no-repeat;
  /* background-size: auto; */
  background-position: 98% 50%;
}

我将它更改font-family为 Sans-serif，因为 Windows 上的 Chrome 将另一个（等宽）字体向右渲染了 2px，你可以稍微玩一下。我使用了这个在线编码器。

这是与等宽字体相同的 svg：

  background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij48Zz48Y2lyY2xlIGN4PSI4IiBjeT0iOCIgcj0iOCIgZmlsbD0iI2ZmMDAwMCIgc3Ryb2tlPSJub25lIiAvPjx0ZXh0IHg9IjYiIHk9IjEzIiBzdHlsZT0iZm9udC1zaXplOiAxNHB4OyBmb250LWZhbWlseTogTW9ub3NwYWNlZDsgZm9udC13ZWlnaHQ6IGJvbGQ7IHN0cm9rZTogbm9uZTsgZmlsbDogI2ZmZmZmZjsiPiE8L3RleHQ+PC9nPjwvc3ZnPg==");

和一个jsfiddle

于 2013-05-06T22:34:54.260 回答