input获取焦点，如何用CSS实现双边框？如下图

Question

如下图：
获取焦点的时候，如何给input在加一个border，这个boder要比默认效果的border要粗。注意，这个不是css shadow的效果，没有羽化。

我想到的是在input外面套个div，粗的border就加在div上，但是这个要用js来操作，有没有用纯css来实现这个效果。比如，input:focus这样的伪类来实现。

Answer 1

input:focus {
    border-color: #7952b3;
    box-shadow: 0 0 0 3px rgba(121,82,179,.25);
}

Answer 2

<div class="box">
    <input/>
    <div></div>
</div>

.box{
  position: relative;
}
.box div{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}
.box input:focus + div{
  border: 3px solid #000;
}

Answer 3

思路：
获得焦点的时候加个class类名
.div{
box-shadow:0 0 5px 5px 色值;
}