How TO - Contact Chips

❮ 前章へ次章へ ❯

コンタクト・チップの作成方法を学習します。

コンタクト・チップ

John Doe

Jane Row ×

コンタクト・チップの作成

ステップ 1) HTML の追加：

例

ステップ 2) CSS の追加：

例

.chip {
    display: inline-block;
    padding: 0 25px;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    border-radius: 25px;
    background-color: #f1f1f1;
}

.chip img {
    float: left;
    margin: 0 10px 0 -25px;
    height: 50px;
    width: 50px;
    border-radius: 50%;
}

Try it Yourself »

クロース可能なコンタクト・チップ

コンタクト・チップを閉じる/非表示にするには、「私をクリックすると、親要素（コンテナ div (class="chip")）を非表示にします」という onclick イベント属性を持つ要素を追加します。

例

チップ: 文字 "x" を作成するには、HTML エンティティの "×" を使用します。

次に、閉じるボタンをスタイルします：

例

.closebtn {
    padding-left: 10px;
    color: #888;
    font-weight: bold;
    float: right;
    font-size: 20px;
    cursor: pointer;
}

.closebtn:hover {
    color: #000;
}

Try it Yourself »

❮ 前章へ次章へ ❯