html - 使用 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 的样式.您将需要使用 span，因为 input 是替换元素，没有您可以设置样式的伪元素。

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>