6

私はオープンソースの開発者であり、Web フレームワーク ( http://mmm.sf.net ) で純粋な HTML5 と CSS3 を使用しています。右側に配置された CSS の input:invalid ルールを使用して、検証エラー アイコンを描画したいと考えています。ただし、FF でのみ機能し、Chrome や Safari などの Webkit ベースのブラウザーでは機能しません。テスト用に最小限のスタンドアロン 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でエンコードされたデータ uris を試すことができます。

これは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他の (等幅) フォントが Windows の Chrome によって右に 2px レンダリングされたため、 を Sans-serifに変更しました。これで少し遊ぶことができます。このオンラインエンコーダーを使用しました。

以下は、モノスペース フォントを使用した同じ svg です。

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

そしてjsfiddle

于 2013-05-06T22:34:54.260 に答える