放大图标周围的框架

Question

有没有办法将边框扩大到60px（如输入）？

https://jsfiddle.net/p5b171tg/1/

HTML：

<form>
<span class="frejm"><i class="fa fa-user-circle-o" aria-hidden="true"></i><input type="text" name="firstname" placeholder="Name"></span>
</form>

CSS：

input[type=text] {
    height: 60px;
    border-width: 1px solid;
    border-color: white;
    background-color: #2b2b2b;
    width: 90%;
}

.fa-user-circle-o{
    padding-top:60px;
    color: white;
}

.frejm{
    background-color: #2b2b2b;
    border-width: 2px;
    border-style: solid;
    border-color: red;
}

Answer 1

input[type=text] {
  height: 60px;
  border-width: 1px solid;
  border-color: white;
  background-color: #2b2b2b;
  flex: 100;
}

.frejm {
  background-color: #2b2b2b;
  border-width: 2px;
  border-style: solid;
  border-color: red;
  display: flex;
  align-items: center;
}

.fa-user-circle-o {
  color: white;
  font-size: 60px !important;
}

<script src="https://use.fontawesome.com/19445204e2.js"></script>
<form>
  <span class="frejm">
    <i class="fa fa-user-circle-o" aria-hidden="true"></i>
    <input type="text" name="firstname" placeholder="Name">
  </span>
</form>

Answer 2

我认为这就是诀窍：

.frejm {
    overflow: hidden;
    padding: 24px 0;
    background-color: #2b2b2b;
    border-width: 2px;
    border-style: solid;
    border-color: red;
    margin-top: 2px;
}

input[type=text] {
    height: 60px;
    border: none;
    border-color: white;
    background-color: #2b2b2b;
    width: 90%;
}