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

发布于04月21日

当我 Select 是或否按钮时，我需要实现下面的绿色勾选

我试着在我的按钮上给右勾号作为背景图像，但它在按钮之后被修剪掉了

Css for it--&gt；

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上给右勾号作为背景图像-然后它被修剪到按钮上，下面的css在div按钮上

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指数--但运气不佳.

如有任何提示/帮助，我将不胜感激.谢谢!

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

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

推荐答案

Css相关问答推荐

防止在添加更多项目时扩展CSS网格行

解释 "document.styleSheets[0].cssRules[0].style;"

我如何使用 CSS 在我的应用程序中每隔 3 位用逗号分隔数字？

弹性布局溢出时的换行符

CSS Select 器 $parent > $child Select 嵌套列表中的所有
子元素

应用边框半径的 iframe 在 4 个角上有细曲线

如何使用显示网格制作不同大小的列取决于元素的数量

悬停时如何更改 navbarPage 链接的文本 colored颜色 (在shiny 的应用程序中)？

使元素在顶部和中心都有粘性

带有 gatsby-plugin-image 的 bootstrap 卡 ImgOverlay 未按预期调整大小

如何使用 TailwindCSS 禁用环形阴影？

固定元素在 Chrome 中消失

纯 CSS 滚动动画

使用 float：left 后如何获得新行？

删除所有填充和边距表格 HTML 和 CSS

Bootstrap 3 Glyphicons CDN

让 div 扩展全高

我的 inline-block 元素没有正确排列

堆叠半透明盒子的 colored颜色取决于订单？

：before 和：：before 有什么区别？