普通元素聚焦outline效果

[yangsirgo]

在实际开发中，普通元素也有类似控件元素的outline效果，例如：基于原生的单复选框模拟单复选框，或者为了规避submit类型按钮UI很难完全保持一致的问题，我们会使用 移花接木，通过for 属性与这些原生表单控件相关联。代码如下：

<input id="t" type="submit">
<label class="btn" for="t">提交</label>
[type="submit"] {
position: absolute;
clip: rect(0 0 0 0);
}
.btn {
display: inline-block;
padding: 2px 12px;
background-color: #cd0000;
color: #fff;
font-size: 14px;
cursor: pointer;
}
:focus + label.btn {
outline: 1px dotted Highlight;
outline: 5px auto -webkit-focus-ring-color;
}

demo地址