Есть ли способ добавить display: none
к стилю флажка «Элемент»? Имеет class="el-checkbox__inner"
.
Когда я меняю display
на none
в браузере, он исчезает, но я не могу получить доступ к этому элементу в коде.
Я пытался:
.el-checkbox__inner {
display: none !important
}
Но не вышло.
Когда я использую:
label {
display: none !important
}
Все элементы исчезают (как и должны).
Когда я использую:
label span {
display: none !important
}
Заглавный элемент пропадает (как и должно).
Когда я использую:
label span span {
display: none !important
}
Это не работает.
Я пробовал использовать :nth-of-type()
и :nth-child()
, но они не помогли.
Кто-нибудь знает, как получить доступ к элементу флажка?
Скриншот и код:
<el-checkbox-group v-model="itemsToBeBought">
<el-checkbox
v-for="(item, index) in shopItems"
:label="item"
:ref="item.category"
:key="index"
>
<el-row>
<el-card :body-style="{ padding: '0px' }">
<img :src="item.image" class="image" />
<div style="padding: 14px">
<span>{{ item.category }}</span>
<div class="bottom clearfix"></div>
</div>
</el-card>
</el-row>
<el-button
class="showDetailsButton"
type="info"
icon="el-icon-message"
@click="showDetails(item)"
>ShowDetails</el-button>
</el-checkbox>
</el-checkbox-group>