[html]
<div class="chip">
  <img src="https://i.imgur.com/GcV2WXu.png" alt="Person" width="96" height="96">
  HTML CSS
</div>
<style>
.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%;
}</style>

<div class="chip">
  <img src="https://i.imgur.com/Mo423le.png" alt="Person" width="96" height="96">
  <span class="closebtn" onclick="this.parentElement.style.display='none'"><font color="red">×</font></span>
JS HTML
</div>
<style>
.closebtn {
    padding-left: 10px;
    color: #888;
    font-weight: bold;
    float: right;
    font-size: 20px;
    cursor: pointer;
}

.closebtn:hover {
    color: #000;
}</style>[/html]

Создание контактных чипов  поехали
Шаг 1) добавить HTML:

.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%;
}

Закрываемые контактные чипы
Чтобы закрыть/скрыть чип контакта, добавьте элемент с атрибутом OnClick события, который говорит: "при нажатии на меня, скрыть мой родительский элемент"-который является контейнер Div (class = "чип").

<div class="chip">
  <img src="img_avatar.jpg" alt="Person" width="96" height="96">
  HTML CSS
  <span class="closebtn" onclick="this.parentElement.style.display='none'">×</span>
</div>

Совет: Используйте объект HTML "×" для создания буквы "x".

Далее, стиль кнопки закрытия:

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

.closebtn:hover {
    color: #000;
}

Подпись автора

вопрос по ◆ВТ◆ в личку

вопрос по ◆ВТ◆ в тему