css - 背景图像允许溢出输入按钮

Question

当我选择"is"或“否”按钮时，我需要实现以下绿色勾号

我尝试在按钮上提供正确的勾号作为背景图像，并且在按钮之后它被修剪

CSS -->

background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8Z' fill='%23137E84'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.18587 7.42171C4.43369 7.17468 4.83549 7.17468 5.08331 7.42171L6.8782 9.21085L10.9167 5.18527C11.1645 4.93824 11.5663 4.93824 11.8141 5.18527C12.062 5.4323 12.062 5.83282 11.8141 6.07985L6.8782 11L4.18587 8.31628C3.93804 8.06925 3.93804 7.66874 4.18587 7.42171Z' fill='white'/%3E%3C/svg%3E");
background-repeat: no-repeat, no-repeat;
background-position: right -7px top -7px;
            

我也尝试过在外部 div 上提供正确的勾号作为背景图像 - 然后它会在按钮上被修剪，并在按钮的外部 div 上使用下面的 CSS

padding-right: 10px;
padding-top: 10px;
background-image: url("data:image/svg+xml,%3Csvg  width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8Z' fill='%23137E84'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.18587 7.42171C4.43369 7.17468 4.83549 7.17468 5.08331 7.42171L6.8782 9.21085L10.9167 5.18527C11.1645 4.93824 11.5663 4.93824 11.8141 5.18527C12.062 5.4323 12.062 5.83282 11.8141 6.07985L6.8782 11L4.18587 8.31628C3.93804 8.06925 3.93804 7.66874 4.18587 7.42171Z' fill='white'/%3E%3C/svg%3E");
        background-repeat: no-repeat, no-repeat;
        background-position: right 5px top 5px;
        overflow: visible;

也尝试摆弄 Z 索引 - 但没有运气。

任何提示/帮助表示赞赏。谢谢!

Answer 1

您可以使用 :after 元素，您可以使用 position:absolute; 将其放置在右上角

const buttons = document.querySelectorAll('div');
Array.from(buttons).forEach(b => b.addEventListener('click', (e) => e.target.classList.toggle('checked')));

.button {
    width: 150px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid lightgrey;
    position: relative;
}

.checked:after {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg  width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8Z' fill='%23137E84'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.18587 7.42171C4.43369 7.17468 4.83549 7.17468 5.08331 7.42171L6.8782 9.21085L10.9167 5.18527C11.1645 4.93824 11.5663 4.93824 11.8141 5.18527C12.062 5.4323 12.062 5.83282 11.8141 6.07985L6.8782 11L4.18587 8.31628C3.93804 8.06925 3.93804 7.66874 4.18587 7.42171Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    position: absolute;
    width: 25px;
    height: 21px;
    right: -12px;
    top: -10px;
}

<div class='button'>FooBar</div>
<br />
<div class='button checked'>FooBar</div>