css - 用 div 制成的伪边框包裹输入

Question

我有一个输入框

<input>

我想做的是在每一侧(顶部、底部、左侧、右侧)用不同的颜色包裹它，这有点像边框。

包装:

<div class="wrapper" placeholder="enter text here">
    <div class="left-side"> </div>
    <div class="middle">
        <div class="top-side"> </div>
        <input class="my-content" >
        <div class="bottom-side"> </div>
    </div>
    <div class="right-side"> </div>
</div>

我想要实现的目标，但我无法获得正确的 div 高度或间距:

我的 CSS:

.wrapper {
 height: 50px;
 width: 200px;
}
.left-side, .right-side, .middle {
  white-space: none;
  vertical-align: top;
  display: inline-block;
}

.left-side {
  border: 1px solid green;
  height: 100%;
}
.top-side {
  border: 1px solid red;
}

.middle {
  height: 95%;
  width: 94%;
}
.my-content {
  height: 100%;
  width: 100%;
}

.bottom-side {
  border: 1px solid blue;
}
.right-side {
  border: 1px solid yellow;
  height: 100%;
}

这是一个链接:http://plnkr.co/edit/oQtWNCBBuc61bRwzDjHP?p=preview

如何使 div 看起来像是输入的边框？ (靠近适当宽度和高度的输入)

Answer 1

如果您不介意使用稍微更新的方法，使用伪元素，可以使用以下方法:

input {
  margin: 0;
  /* removing the border of the nested input
     since those borders aren't what you want: */
  border-width: 0;
}
div {
  /* causes the <div> to collapse to the size of its content: */
  display: inline-block;
  /* removes the space between the outside content (the <div>)
     and the inner, the <input>: */
  padding: 0;
  /* just a personal aesthetic, disregard or adjust: */
  margin: 0;
  /* setting the default borders: */
  border: 4px solid red;
  /* changing the colour of the bottom border: */
  border-bottom-color: blue;
  /* to allow for positioning the pseudo-elements: */
  position: relative;
}

div::before {
  /* without a content value the element won't be rendered: */
  content: '';
  /* for positioning: */
  position: absolute;
  /* positioning it at the top of the element, minus the
     width of the border: */
  top: -4px;
  /* as above, but at the bottom: */
  bottom: -4px;
  /* as above, but on the left: */
  left: -4px;
  /* defining the width of the pseudo-element
     equal to the border-width: */
  width: 4px;
  /* defining the fake 'border' colour: */
  background-color: green;
}

div::after {
  content: '';
  position: absolute;
  top: -4px;
  bottom: -4px;
  right: -4px;
  width: 4px;
  background-color: yellow;
}

<div>
  <input />
</div>

或者，允许动画，例如，从您的评论到您的问题，允许边框从左侧“滑入”:

I'm experimenting with different type of border behavior, for example, I could want the border to transition from left to right

div {
  padding: 0.5em;
  display: inline-block;
  box-sizing: border-box;
  width: 200px;
  border-radius: 1em;
  /* to center the <input>: */
  text-align: center;
  background-image: url(http://i.stack.imgur.com/fgteK.jpg);
  /* if the image repeats, then it's going to be visible all
     the time (though repeat-x, and repeat-y could still
     be used: */
  background-repeat: no-repeat;
  /* hiding it past the left of the element,
     the image being 400px wide: */
  background-position: -400px 0;
  /* to transition, rather than 'jump' into place: */
  transition: background-position 0.5s linear;
}
div:hover {
  /* changing the background-position (which
     will transition, thanks to the setting abovce): */
  background-position: 50% 0;
}
input {
  border: 1px solid #99f;
  border-radius: 1em;
  transition: all 0.5s linear;
  outline: none;
}
input:hover {
  box-shadow: 0 0 6px #99f;
}
input:focus {
  box-shadow: 0 0 10px 4px #99f;
}

<div>
  <input />
</div>