CSS轮廓宽度不起作用

Question

我正在尝试将输入元素的轮廓宽度设置为焦点。不管我的设置如何，轮廓宽度都保持不变（就像它是无法更改的默认设置）。

这是代码笔的示例

这是css的一部分，我试图将焦点设置为轮廓宽度：

input:focus {
  outline-width: 0.1px;
  outline-color: #725b44;  
}

编辑：

我只是忘了包括线条样式（实线，点线...）。现在可以了。一件事对我来说仍然很奇怪。为什么轮廓在元素内？不是将轮廓定义为“在元素周围（边界之外）绘制的线以使元素“突出”。”

这里从我的示例大纲看起来像这样。我以为它会在element周围，但它在里面：

Answer 1

添加outline-style: solid到您的CSS。

由于该outline-style属性的默认样式为none，因此您也必须对其进行设置（none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit）。您可以为样式使用的最佳价值是solid，但这是优先选择的问题。

行为示例：

input {
  font-size: 22px;
  padding: 5px 3px;
  color: #666;
}

input.with-outline-style:focus {
  outline-width: 3px;
  outline-style: solid;
  outline-color: #725b44;
  /* You could also use the shorthand: */
  /* outline: 3px solid #666; */
  /*       width style color */
}

input.without-outline-style:focus {
  outline-width: 3px;
  outline-color: #725b44;
}

body {
  background-color: #fd9;
}

div {
  padding: 5px 10px;
}

<div>
  <input type="text" class="with-outline-style" value="outline-style set to solid" />
</div>

<div>
  <input type="text" class="without-outline-style" value="outline-style not set" />
</div>

更新资料

如果未outline-width指定，设置将无法使用outline-style：如果未设置轮廓样式，浏览器将以其默认样式呈现轮廓（可以是任何样式，例如IE中的虚线矩形，Chrome中的阴影矩形，甚至什么也没有） 。

Answer 2

你应该添加1px而不是0.1px用outline-style

input:focus {
  outline:1px solid #725b44;  
}