web-dev-qa-db-ja.com

HTML / XHTMLのチェックマーク

内部Webアプリ内に 目盛り記号 （✓または✔）を表示する必要があります。画像を使用しないのが理想的です。

IEボックス上のXP 6.0.2900から作業を開始する必要があります。理想的にはクロスブラウザ（IE +最近のバージョンのFF）が必要です。

次の例では、ブラウザのエンコーディングをUTF-8に設定しています（METAは問題なく動作します）。デフォルトのフォントはTimes New Romanです（問題かもしれませんが、Lucida Sans Unicodeを試しても役に立たず、Arial Unicode MSもLucida Grandeもインストールされていません）。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
 &#10003; &#10004;
</body>
</html>

任意の助けをいただければ幸いです。

以下はIE 6.0およびIE 7で機能します。

<html>
<head>

</head>
<body>
 <span style="font-family: wingdings; font-size: 200%;">&#252;</span>
</body>
</html>

誰かがWindows上のFFの下でチェックできれば私は感謝します。私はそれがWindows以外のボックスではうまくいかないと確信しています。

htmlxhtml
268
Vlad Gudim

あまりサポートされていないUnicode値を使用していると思います。これには、すべてのコードポイントに対して常にグリフがあるわけではありません。
次の文字を試してください。

  • ☐（ 0x2610 、Unicodeの16進数[HTML 10進数：&#9744;]）：空の（チェックなし）チェックボックス
  • ☑（ 0x2611 [HTML 10進：&#9745;]）：前のチェックボックスのチェック済みバージョン
  • ✓（ 0x2713 [HTML 10進数：&#10003;]）
  • ✔（ 0x2714 [HTML 10進数：&#10004;]）

編集：ここで最初の記号について混乱があるようです☐/ 0x2610。これは空の（チェックされていない）チェックボックスです。したがって、ボックスが表示されている場合は、それが表示されるはずの方法です。これは☑/ 0x2611の対応版で、これはチェックされたバージョンです。

447
John Feminella

まず最初に、HTMLエンティティのエンコーディングがUTF-8として正しく宣言されていれば、HTMLエンティティを実際に使用する必要はないということを理解する必要があります。 JavaScript /なんでも。

そうは言っても、これはこのトピックに関連するすべての関連UTF-8文字/ HTMLエンティティの包括的なリストです。

  • ☐（hex：&#x2610;/dec：&#9744;）：投票箱（空、そういうふうになっているはずです）
  • ☑（hex：&#x2611;/dec：&#9745;）：小切手付き投票箱
  • ☒（hex：&#x2612;/dec：&#9746;）：x付きの投票箱
  • ✓（hex：&#x2713;/dec：&#10003;）：チェックマーク、 ほとんどのブラウザの&checkmark;および&check;に相当します
  • ✔（hex：&#x2714;/dec：&#10004;）：重いチェックマーク
  • ✗（hex：&#x2717;/dec：&#10007;）：投票用紙x
  • xxx（16進：&#x2718;/dec：&#10008;）：重い投票用紙x
  • ???? （⚠hex：&#x1F5F8;/dec &#128504;）：薄いチェックマーク（2017年時点でのサポートは不十分）
  • ✅（⚠hex：&#x2705;/dec：&#9989;）：白い太いチェックマーク（2017年時点での混合サポート）
  • ???? （⚠hex：&#x1F5F4;/dec：&#128500;）：投票用紙X（2017年時点でのサポートは不十分）
  • ???? （⚠hex：&#x1F5F6;/dec：&#128502;）：投票ボールドスクリプトX（2017年時点でのサポートは不十分）
  • ⮽（⚠hex：&#x2BBD;/dec：&#11197;）：ライトXの投票箱（2017年時点でのサポートは不十分）
  • ???? （⚠hex：&#x1F5F5;/dec：&#128501;）：スクリプトX付きの投票箱（2017年時点でのサポートは不十分）
  • ???? （⚠hex：&#x1F5F9;/dec：&#128505;）：太字のチェックが付いた投票箱（2017年時点でのサポートは不十分）
  • ???? （⚠hex：&#x1F5F7;/dec：&#128503;）：太字のX付きの投票箱（2017年時点でのサポートは不十分）

目盛り記号のWebフォントをチェックアウトしますか。これがより一般的なもののためにすぐに使えるサンプルです：A☐B☑C☒D✓E✔F✗G✘H - これをあなたのウェブフォントプロバイダのサンプルテキストボックスにコピー＆ペーストしてどのフォントがどのティックシンボルをサポートするかを見てください。

254
Bogdan Stăncescu

クライアントマシンはそれを表示するためにこの文字のグリフを持つ適切なフォントを必要とします。しかし、Times New Romanはそうではない。代わりにArial Unicode MSまたはLucida Grandeを試してください。

<span style="font-family: Arial Unicode MS, Lucida Grande">
    &#10003; &#10004;
</span>

これは、XP 5.5、IE 6.0、FF 3.0.6のWindows IEで動作します。

17
Gumbo

私は通常fontawesomeフォントを使用します（ http://fontawesome.io/icon/check/ ）、あなたはそれをhtmlファイルで使うことができます：

 <i class="fa fa-check"></i>

またはCSSで：

content: "\f00c";
font-family: FontAwesome;
13
stefan

読み取り専用モードでHTML入力チェックボックス要素を使用しないのはなぜですか

<input type="checkbox" disabled="disabled" /> and
<input type="checkbox" checked="checked" disabled="disabled" />

私はこれがすべてのブラウザでうまくいくと思います。

11
Drejc

私は同じ問題に遭遇し、提案のどれも働かなかった（Windows XPのFirefox）。

だから私は小さなチェックマークを表示するために画像データを使用して可能な 回避策 を見つけました：

span:before {
    content:url("data:image/gif;base64,R0lGODlhCgAKAJEAAAAAAP///////wAAACH5BAEAAAIALAAAAAAKAAoAAAISlG8AeMq5nnsiSlsjzmpzmj0FADs=");
}

もちろん、あなた自身のチェックマーク画像を作成してそれをdata：image/gifとして追加するためにコンバーターを使うことができます。お役に立てれば。

10
Kai Noack

パーティーに非常に遅く来て、私は&check;（✓）がOperaで働いていたことを知りました。私は他のどのブラウザでもそれをテストしていません、しかしそれは何人かの人々のために役に立つかもしれません。

8
rossum

ブラウザのエンコーディングをUTF-8に設定します。

（もちろん数字参照を使っているのであれば、どのエンコーディングが使われていてもかまいません。ブラウザは数字から直接正しいUnicodeコードポイントを取得します。）

<span style="font-family: wingdings; font-size: 200%;">&#252;</span>

誰かがWindows上のFFの下でチェックできれば私は感謝します。私はそれがWindows以外のボックスではうまくいかないと確信しています。

Firefox 3、Opera、およびSafariでは失敗します。不思議なことに、他のWebkitブラウザ、Chromeで動作します。 Linux上でも失敗する（明らかに、Wingdingsはそこにインストールされていない。Macsにインストールされているが、Safariがそれを持っていないのであればあなたには役に立たない）。

また、それはかなり厄介なハックです - その性格はすべての意図と目的に対するものであり、検索エンジンのようなものに、またはテキストがコピーアンドペーストされている場合にはそのように見えます。他に選択肢がない場合を除き、適切なUnicodeコードポイントを使用することができます。

問題は、WindowsにバンドルされているフォントがU + 2713 CHECK MARK（ '✓'）を提供していないことです。あなたがWindowsマシン上で見つける可能性が最も高いのは「Arial Unicode MS」だけですが、これは実際には信頼できません。だから最後に私はあなたがしなければならないと思います：

  • よりよくサポートされている別の文字を使用してください（例：SOで使用されている「●」 - 箇条書き ）、または
  • 代替テキストとして「✓」を使用して画像を使用します。
8
bobince
.className {
   content: '\&#x2713';
}

CSSコンテンツプロパティを使用すると、画像や他のコードサインで目盛りを表示できます。

5
s-sharma

√（平方根記号、√）で十分でしょうか。

あるいは、ブラウザにデータを送信するContent-Type:ヘッダーbeforeを設定していることを確認してください。単に<meta> content-typeタグを指定するだけでは、ブラウザに正しい文字セットを使用させるのに十分ではない場合があります。

4
Ian Kemp

Unicodeベースではなく、WingdingがインストールされていないLinuxでは機能しないWingdingを使用したソリューション。

Crossed Checkbox
<div style="font-family: Wingdings;">û</div> ☒

Checked Checkbox
<div style="font-family: Wingdings;">ü</div> ☑

Cross
<div style="font-family: Wingdings;">ý</div> ✗

Check
<div style="font-family: Wingdings;">þ</div> ✓
3
Nishant

あなたはBase64でエンコードされたGIF（ここで オンラインジェネレータで小さな白いものを追加することができます ）：

url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==")

たとえばChromeでは、チェックボックスコントロールのスタイルを設定するために使用します。

INPUT[type=checkbox]:focus
{
outline:1px solid rgba(0,0,0,0.2);
}

INPUT[type=checkbox]
{
background-color: #DDD;
border-radius: 2px;
-webkit-appearance: button;
width: 17px;
height: 17px;
margin-top: 1px;
cursor:pointer;
}

INPUT[type=checkbox]:checked
{
background:#409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}

IMGタグ内でそれを望んでいるだけの場合は、次のようにチェックマーク/目盛りを付けます。

<img alt="" src="data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==" width="11" height="10">
0
Volomike

あなたは、またはを使用することができます

0
Gabriel Solomon