Question

我有一个使用contenteditable div的webapp。我喜欢它们在Chrome中的显示效果：当我对焦时，Chrome会在div周围显示出漂亮的蓝色光芒。但是在Firefox中，我得到了一个丑陋的虚线轮廓。到目前为止我观察到的是，一旦我更改了div：focus的轮廓，Chrome就会停止显示其默认的蓝框。我想让我的应用程序保持一致，所以我的问题是

如何复制Chrome div[contenteditable="true"]:focus的默认样式？

Answer 1

要回答这个问题，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上的默认用户代理样式，这将有助于

.myClass:focus {
  outline: 1px dotted #212121;
  outline: 5px auto -webkit-focus-ring-color;
}

-webkit - 前缀颜色表示FF，IE和Edge将忽略第二个规则并使用第一个规则。 Chrome，Safari和Opera将使用第二条规则。

HTH！

Answer 2

这个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;
}

Answer 3

我认为我已经找到了完美的选择，至少对我来说：

// Beggin

button {
  outline: 5px auto rgba(0, 150, 255, 1);
  -webkit-outline: 5px auto rgba(0, 150, 255, 1);
  -moz-outline: 5px auto rgba(0, 150, 255, 1);
  -ms-outline: 5px auto rgba(0, 150, 255, 1);
  -o-outline: 5px auto rgba(0, 150, 255, 1);
  /* Use a border to apply the outline */
  border: 1px solid rgba(0, 0, 0, 0);
  
  /* Unimortant styling: */
  background: linear-gradient(to bottom, #fff 30%, #fcfcfc 40%, #f8f8f8 50%, #f0f0f0 100%);
}

<button type="button"">Outline</button>

Chrome中蓝色焦点轮廓的默认样式是什么？

3 个答案: