文本输入的焦点态统一成描边变色
原来三个组件各写一份、筛选输入框哪份都没有,落到全局的外圈 outline, 和订阅选择器长得不一样。规则上收到 tokens.css 一处,组件里的重复定义 删掉。按钮保留外圈焦点环,那是键盘可达性。
This commit is contained in:
@@ -175,12 +175,6 @@ function onFocusOut(event: FocusEvent) {
|
||||
font-size: var(--t-sm);
|
||||
}
|
||||
|
||||
/* 焦点态由整个框的描边表达,框里的输入不再自己画一圈 */
|
||||
.box input:focus,
|
||||
.box input:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 浮在上面,不能把下面几行顶下去 */
|
||||
.menu {
|
||||
position: absolute;
|
||||
|
||||
@@ -150,6 +150,14 @@ kbd,
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* 文本输入的焦点态统一为描边变色,不叠外圈(订阅选择器的形态)。按钮保留外圈,那是键盘可达性 */
|
||||
input:focus-visible,
|
||||
select:focus-visible,
|
||||
textarea:focus-visible {
|
||||
outline: none;
|
||||
border-color: var(--c-accent);
|
||||
}
|
||||
|
||||
/* 交互控件的颜色过渡。只过渡颜色类属性,不碰布局;时长以「感知得到但不等待」为准 */
|
||||
button,
|
||||
input,
|
||||
|
||||
@@ -280,12 +280,6 @@ select {
|
||||
background-position: right var(--s-3) center;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus {
|
||||
border-color: var(--c-accent);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.note {
|
||||
font-size: var(--t-xs);
|
||||
color: var(--c-text-faint);
|
||||
|
||||
@@ -62,11 +62,6 @@ h1 {
|
||||
background: var(--c-surface);
|
||||
}
|
||||
|
||||
.field:focus {
|
||||
border-color: var(--c-accent);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.go {
|
||||
padding: var(--s-3) var(--s-4);
|
||||
border: 1px solid transparent;
|
||||
|
||||
Reference in New Issue
Block a user