outline样式:auto已经拥有完全的浏览器支持很久了。

速记是:

outline: auto blue;

这让你设置自定义颜色，但不是自定义厚度，不幸的是(尽管我认为浏览器的默认厚度是一个很好的默认)。

您还可以在使用outline-style: auto时设置自定义outline-offset。

outline: auto blue;
outline-offset: 0px;

我喜欢这样。

.circle:before {
   content: "";
   width: 14px;
   height: 14px;
   border: 3px solid #fff;
   background-color: #ced4da;
   border-radius: 7px;
   display: inline-block;
   margin-bottom: -2px;
   margin-right: 7px;
   box-shadow: 0px 0px 0px 1px #ced4da;
}

它会创建一个灰色的圆，周围有边框，边框也是1px !

结合盒子阴影和轮廓。

李·海耶斯的回答有点小变化 我发现

input[type=text]:focus {
    box-shadow: 0 0 0 1pt red;
    outline-width: 1px;
    outline-color: red;
}

最后的效果非常干净。没有使用边界半径时的大小跳跃

我在制作自定义单选按钮，我发现最好的自定义方法是使用伪元素，比如:Codepen

/*CSS is compiled from SCSS*/ .product-colors { margin-bottom: 1em; display: flex; align-items: center; } .product-colors label { position: relative; width: 2.1em; height: 2.1em; margin-right: 0.8em; cursor: pointer; } .product-colors label:before { opacity: 0; width: inherit; height: inherit; padding: 2px; border: 2px solid red; border-radius: 0.2em; content: ""; position: absolute; z-index: 1; background: transparent; top: -4px; left: -4px; } .product-colors input { position: absolute; opacity: 0; width: 0; height: 0; } .product-colors input:checked + label:before, .product-colors input:focus + label:before { opacity: 1; } <div class="product-colors"> <input type="radio" name="cs" id="cs1" value="black"> <label for="cs1" style="background:black"></label> <input type="radio" name="cs" id="cs2" value="green"> <label for="cs2" style="background:green"></label> <input type="radio" name="cs" id="cs3" value="blue"> <label for="cs3" style="background:blue"></label> <input type="radio" name="cs" id="cs4" value="yellow"> <label for="cs4" style="background:yellow"></label> </div>

我有一个圆形边框的输入字段，想要改变焦点轮廓的颜色。我无法控制输入控件中可怕的方形轮廓。

所以我用了盒影。实际上我更喜欢阴影的平滑外观，但阴影可以被硬化以模拟圆形轮廓:

输入，输入:焦点{ 边界:没有; border - radius: 2分; Box-shadow: 0 0 0 1pt灰色; 大纲:没有; 过渡:1。; ｝ /*平滑的轮廓与盒子阴影:*/ .text1:专注{ 箱影:0 0 3pt 2pt矢车菊蓝; ｝ /*硬“轮廓”与盒子阴影:*/ .text2:专注{ 箱影:0 0 0 2pt红色; ｝ <输入class = " text1 " > < br > < br > <input type=text class="text2">

There is the solution if you need only outline without border. It's not mine. I got if from Bootstrap css file. If you specify outline: 1px auto certain_color, you'll get thin outer line around div of certain color. In this case the specified width has no matter, even if you specify 10 px width, anyway it will be thin line. The key word in mentioned rule is "auto". If you need outline with rounded corners and certain width, you may add css rule on border with needed width and same color. It makes outline thicker.