使用CSS输入的自定义样式

Question

我有这样的输入设计:

但凭借我的风格,我不能那样做.

我的CSS:

input.custom[type=text]{
    border: none;
    border-bottom: 1px solid #00CCCB;
}

.custom::-webkit-input-placeholder {
    color: #727272;
}

.custom:-moz-placeholder { /* Firefox 18- */
    color: #727272;  
}

.custom::-moz-placeholder {  /* Firefox 19+ */
    color: #727272;  
}

.custom:-ms-input-placeholder {  
    color: #727272;  
}

我的HTML:

<input type="text" class="custom" placeholder="Text goes here"/>

结果:

如何设置带有底部边框和微小左,右边框的输入,就像在我的设计中一样？

Answer 1

你可以包装input在一个span与时尚:before和:after对相应.您将需要使用spanas inputs替换元素,而不使用psuedo元素.

input {
  border: none;
  border-bottom: 1px solid #00CCCB;
  padding: 0 10px;
  color: #727272;
  font-size: 20px;
  vertical-align: baseline;
}
input:focus {
  outline: none;
}
span {
  position: relative;
  display: inline-block;
}
span:before,
span:after {
  content: '';
  display: block;
  bottom: 0;
  height: 15px;
  border-left: 1px solid #00CCCB;
  position: absolute;
}
span:after {
  right: 0;
}

<span><input /></span>