fix(web): 搜索框聚焦双框与滚动条
- 组件库 Input:聚焦只用边框变主色,不再叠加 outline(文本框点击也会命中 :focus-visible) - 页面全局 :focus-visible 收窄到非表单控件,避免覆盖输入框自身的 outline 处理 - 搜索框恢复旧版浅边框 + 卡片阴影,聚焦不追加边框/焦点环 - Layout 新增 hideScrollbar,内容区滚动条隐藏(旧版行为)
This commit is contained in:
@@ -90,9 +90,10 @@
|
|||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 旧版搜索是「无边框 + 卡片阴影」 */
|
/* 旧版搜索是「浅边框 + 卡片阴影」,聚焦时不额外加边框/焦点环 */
|
||||||
.search-row > *:first-child {
|
.search-row > *:first-child,
|
||||||
border-color: transparent;
|
.search-row > *:first-child:focus-within {
|
||||||
|
border-color: var(--su-border);
|
||||||
box-shadow: var(--su-shadow-card);
|
box-shadow: var(--su-shadow-card);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -263,6 +263,7 @@ export default function App() {
|
|||||||
contentOffset={88}
|
contentOffset={88}
|
||||||
height="screen"
|
height="screen"
|
||||||
scrollable
|
scrollable
|
||||||
|
hideScrollbar
|
||||||
contentId="content-scroll"
|
contentId="content-scroll"
|
||||||
className="app"
|
className="app"
|
||||||
header={
|
header={
|
||||||
|
|||||||
+12
-2
@@ -40,8 +40,18 @@ ol {
|
|||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 键盘焦点环由组件库统一提供;页面只补“可聚焦容器”的兜底 */
|
/* 键盘焦点环由组件库统一提供;这里只给「非表单控件」补兜底。
|
||||||
:focus-visible {
|
表单控件不能加全局 outline:输入框点击时也会命中 :focus-visible,
|
||||||
|
会和组件自己的边框态叠成「双框」(用户实际报过的 bug)。 */
|
||||||
|
a:focus-visible,
|
||||||
|
button:focus-visible,
|
||||||
|
[tabindex]:not(input):focus-visible {
|
||||||
outline: var(--su-focus-ring);
|
outline: var(--su-focus-ring);
|
||||||
outline-offset: var(--su-focus-ring-offset);
|
outline-offset: var(--su-focus-ring-offset);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input:focus-visible,
|
||||||
|
textarea:focus-visible,
|
||||||
|
select:focus-visible {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user