我有一个使用contenteditable div的webapp.我喜欢它们在Chrome中的显示方式:当我对焦时,Chrome会在div周围显示出漂亮的蓝色光芒.但是在Firefox中,我得到了一个丑陋的虚线轮廓.到目前为止我观察到的是,一旦我更改了div:focus的轮廓,Chrome就会停止显示其默认的蓝框.我想让我的应用程序一直很好看,所以我的问题是
我该如何复制Chrome的默认样式div[contenteditable="true"]:focus
?
这个小提琴提供了一个很好的近似值,不过您可能需要进行调整以更接近于自己所想要的。
的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; }
要回答这个问题,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
)(参考).
虽然我理解您对一致性的渴望,但用户通常只使用一个浏览器,并习惯于浏览器的默认样式.请注意,除非您计划更改每个实例,否则:focus
最终会出现与键盘用户不一致的情况.优点和缺点呃!
如果您定义outline
样式并希望"恢复"回默认的用户代理样式:focus
,这将有所帮助
.myClass:focus {
outline: 1px dotted #212121;
outline: 5px auto -webkit-focus-ring-color;
}