我有一个使用contenteditable div的web应用程序。我喜欢它们在Chrome中的显示方式:当我聚焦时,Chrome会在div周围显示一个漂亮的蓝色边框。但是在Firefox中,我得到了一个难看的虚线边框。到目前为止,我观察到的是,一旦我改变div:focus的边框,Chrome就会停止显示默认的蓝色边框。我想让我的应用程序看起来一直很漂亮,所以我的问题是如何复制Chrome默认div[contenteditable="true"]:focus风格?
div[contenteditable="true"]:focus
4nkexdtk1#
为了回答这个问题,Webkit浏览器使用outline: 5px auto -webkit-focus-ring-color;。在Mac上,-webkit-focus-ring-color是蓝色的rgb(94, 158, 214)(或#5E9ED6),但在Windows和Linux上,它是金色的rgb(229, 151, 0)(或#E59700)(ref)。虽然我理解你对一致性的渴望,但用户通常只使用一个浏览器,并且习惯于他们浏览器的默认风格。注意,除非你计划改变:focus的每个示例,否则你最终会得到不一致性,比如键盘用户。如果您定义了outline样式,并希望“还原”回:focus上的默认用户代理样式,这将有所帮助
outline: 5px auto -webkit-focus-ring-color;
-webkit-focus-ring-color
rgb(94, 158, 214)
#5E9ED6
rgb(229, 151, 0)
#E59700
:focus
outline
.myClass:focus { outline: 1px dotted #212121; outline: 5px auto -webkit-focus-ring-color; }
-webkit-前缀颜色表示FF、IE和Edge将忽略第二条规则而使用第一条规则。Chrome、Safari和Opera将使用第二条规则。嘘!
-webkit
inn6fuwd2#
这个fiddle给出了一个很好的近似值,你可能想调整一下,让它更接近你所追求的。HTML语言
<div contenteditable='true'>Edit Me</div>
CSS
div[contenteditable=true] { width:200px; border:2px solid #dadada; border-radius:7px; font-size:20px; padding:5px; margin:10px; } div[contenteditable=true]:focus { outline:none; border-color:#9ecaed; box-shadow:0 0 10px #9ecaed; }
0wi1tuuw3#
我想我找到了一个完美的,至少对我来说:第一个
ckocjqey4#
.myClass:focus { outline-color: Highlight; outline-color: -webkit-focus-ring-color; outline-style: auto; outline-width: 1px; }
vwkv1x7d5#
对于Tailwind用户来说,这是不同的,在^3.1.8上测试。Tailwind覆盖默认焦点颜色。
5条答案
按热度按时间4nkexdtk1#
为了回答这个问题,Webkit浏览器使用
outline: 5px auto -webkit-focus-ring-color;
。在Mac上,-webkit-focus-ring-color
是蓝色的rgb(94, 158, 214)
(或#5E9ED6
),但在Windows和Linux上,它是金色的rgb(229, 151, 0)
(或#E59700
)(ref)。虽然我理解你对一致性的渴望,但用户通常只使用一个浏览器,并且习惯于他们浏览器的默认风格。注意,除非你计划改变
:focus
的每个示例,否则你最终会得到不一致性,比如键盘用户。如果您定义了
outline
样式,并希望“还原”回:focus
上的默认用户代理样式,这将有所帮助-webkit
-前缀颜色表示FF、IE和Edge将忽略第二条规则而使用第一条规则。Chrome、Safari和Opera将使用第二条规则。嘘!
inn6fuwd2#
这个fiddle给出了一个很好的近似值,你可能想调整一下,让它更接近你所追求的。
HTML语言
CSS
0wi1tuuw3#
我想我找到了一个完美的,至少对我来说:
第一个
ckocjqey4#
vwkv1x7d5#
对于Tailwind用户来说,这是不同的,在^3.1.8上测试。Tailwind覆盖默认焦点颜色。