eNPdQE

eNPdQE.markdown

eNPdQE

A Pen by hui liu on CodePen.

License.

index.html

<div class="input">
  <input type="text" placeholder="dddd" />
</div>
<hr>

style.css

.input{
  margin:20px;
  width:300px;
  height:20px;
  background-color:#eee;
  border:0;
  border-bottom:1px solid red;
  position:relative;
  &::before{
    content:'';
    border-left:1px solid blue;
    height:10px;
    width:10px;
    position:absolute;
    bottom:0;
    left:0px;
  }
  &::after{
    content:'';
    border-right:1px solid red;
    height:10px;
    width:10px;
    position:absolute;
    /*top:50%;*/
    bottom:0;
    right:0px;
  }
}

input{
  display:block;
  width:100%;
  height:100%;
  outline:0;
  border:0;
  padding-left:10px;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />