web-dev-qa-db-ja.com

CSSを使用してチェックマーク/ティックを描画する方法は？

CSSを使用して目盛り記号をdrawする方法は？ nicode を使用して見つけたシンボルは、見た目が良くありません。

EDITアイコンフォントは素晴らしい提案です。 this のようなものを探していました。

cssdrawingcss-shapes
45
dayuloli

Webフォントを含めることができ、必要なグリフだけでファイルサイズを縮小することもできます。 https://github.com/fontello/fontellohttp://fontello.com/

li:before {
  content:'[add icon symbol here]';
  font-family: [my cool web icon font here];
  display:inline-block;
  vertical-align: top;
  line-height: 1em;
  width: 1em;
  height:1em;
  margin-right: 0.3em;
  text-align: center;
  color: #999;
}
17
JohanVdR

2つの長方形を描画して、それらを隣り合わせに配置できます。次に、45度回転します。バリエーションの幅/高さ/上部/左パラメータを変更します。

デモ1

デモ2（円あり）

HTML

<span class="checkmark">
    <div class="checkmark_stem"></div>
    <div class="checkmark_kick"></div>
</span>

CSS

.checkmark {
    display:inline-block;
    width: 22px;
    height:22px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

.checkmark_stem {
    position: absolute;
    width:3px;
    height:9px;
    background-color:#ccc;
    left:11px;
    top:6px;
}

.checkmark_kick {
    position: absolute;
    width:3px;
    height:3px;
    background-color:#ccc;
    left:8px;
    top:12px;
}
78
dayuloli

別のCSSソリューションを次に示します。コードの行数が少なくなります。

ul li:before
{content:'\2713';
  display:inline-block;
  color:red;
  padding:0 6px 0 0;
  }
ul li{list-style-type:none;font-size:1em;}

<ul>
    <li>test1</li>
    <li>test</li>
</ul>

デモリンクはこちら http://jsbin.com/keliguqi/1/

51
Kheema Pandey

文字Lでいくつかの変換を行います

.checkmark {
  font-family: arial;
  -ms-transform: scaleX(-1) rotate(-35deg); /* IE 9 */
  -webkit-transform: scaleX(-1) rotate(-35deg); /* Chrome, Safari, Opera */
  transform: scaleX(-1) rotate(-35deg);
}
<div class="checkmark">L</div>
38
Henry

：before /：after psuedo-elementsのいずれか1つのみを使用できる場合の追加の解決策は、次のとおりです。 ：after-Checkbox using borders

基本的に、border-bottomおよびborder-rightプロパティを使用してチェックボックスを作成し、transformを使用してミラー化されたLを回転します。

例

li {
  position: relative; /* necessary for positioning the :after */
}

li.done {
  list-style: none; /* remove normal bullet for done items */
}

li.done:after {
  content: "";
  background-color: transparent;
  
  /* position the checkbox */
  position: absolute;
  left: -16px;
  top: 0px;

  /* setting the checkbox */
    /* short arm */
  width: 5px;
  border-bottom: 3px solid #4D7C2A;
    /* long arm */
  height: 11px;
  border-right: 3px solid #4D7C2A;
  
  /* rotate the mirrored L to make it a checkbox */
  transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
To do:
<ul>
  <li class="done">Great stuff</li>
  <li class="done">Easy stuff</li>
  <li>Difficult stuff</li>
</ul>
19
Philip

2つのコンポーネントを1つだけ作成する必要がないため、この方法が気に入っています。

.checkmark:after {
    opacity: 1;
    height: 4em;
    width: 2em;
    -webkit-transform-Origin: left top;
    transform-Origin: left top;
    border-right: 2px solid #5cb85c;
    border-top: 2px solid #5cb85c;
    content: '';
    left: 2em;
    top: 4em;
    position: absolute;
}

Scott Galloway Penのアニメーション

2
BM2ilabs
li:before {
    content: '';
    height: 5px;
    background-color: green;
    position: relative;
    display: block;
    top: 50%;
    left: 50%;
    width: 9px;
    margin-left: -15px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
li:after {
    content: '';
    height: 5px;
    background-color: green;
    position: relative;
    display: block;
    top: 50%;
    left: 50%;
    width: 20px;
    margin-left: -11px;
    margin-top: -6px;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
2
Okiemute Omuta

描画しないで目盛り記号を使用することをお勧めします。または、無料のウェブフォントを使用します。fontello[dot] comティック記号をウェブフォントグリフに置き換えることができます。

リスト

ul {padding: 0;}
li {list-style: none}
li:before {
  display:inline-block;
  vertical-align: top;
  line-height: 1em;
  width: 1em;
  height:1em;
  margin-right: 0.3em;
  text-align: center;
  content: '✔';
  color: #999;
}

ここを参照してください： http://jsfiddle.net/hpmW7/3/

チェックボックス

ティックシンボルグリフとCSS 3アニメーションを含むWebフォントもあります。 IE8では、：checkedを理解しないため、ポリフィルを適用する必要があります。

input[type="checkbox"] {
  clip: rect(1px, 1px, 1px, 1px);
  left: -9999px;
  position: absolute !important;
}
label:before,
input[type="checkbox"]:checked + label:before {
  content:'';
  display:inline-block;
  vertical-align: top;
  line-height: 1em;
  border: 1px solid #999;
  border-radius: 0.3em;
  width: 1em;
  height:1em;
  margin-right: 0.3em;
  text-align: center;
}
input[type="checkbox"]:checked + label:before {
  content: '✔';
  color: green;
}

JSフィドルを参照してください： http://jsfiddle.net/VzvFE/37

2
JohanVdR

これを試してください// htmlの例

<span>&#10003;</span>

// cssの例

span {
  content: "\2713";
}
1
silvedo

fontawesome.io を試してみてください。

アイコンの素晴らしいコレクションがあります。あなたのために<i class="fa fa-check" aria-hidden="true"></i>は動作するはずです。これにも多くのチェックアイコンがあります。それが役に立てば幸い。

1
gursahib.singh.sahni