shoelace-style/shoelace

The clear button for input collapse when the input has a small width

Open

#2,414 创建于 2025年3月30日

在 GitHub 查看
 (0 评论) (1 反应) (0 负责人)TypeScript (922 fork)github user discovery
bugfixed-in-wagood first issuehelp wanted

仓库指标

Star
 (13,867 star)
PR 合并指标
 (30 天内没有已合并 PR)

描述

Describe the bug

When a the sl-input has a small width, e.g. 8rem, the clear button of the input has a smaller width than usual.

To Reproduce

<sl-input clearable value="1234"></sl-input>

sl-input {
  max-width: 8rem
}

Demo

https://codepen.io/fsujvjic-the-reactor/pen/GgRYzXe

Browser / OS

  • OS: Windows
  • Browser: Firefox
  • Browser version: 136.0.4

贡献者指南

研究方向
检查 `sl input` 组件的 CSS，特别是清除按钮的样式及其在输入宽度受限时的行为。查看组件的 shadow DOM 和影响清除按钮宽度的 CSS 变量。
技术栈
htmlcssjavascripttypescript
领域
frontend
议题类型
缺陷
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
1
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
1-3 小时
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
活跃
清晰度议题是否清楚说明期望改动、验收标准和下一步。
清晰
前置要求
GitCSS
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
80