Custom style for input with CSS

Question

I have a design for input like this:

But with my style, I can't do that.

My 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;  
}

My HTML:

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

Results:

How can I style an input with bottom border and tiny left, right borders, like in my design?

Answer 1

您可以将input打包在span中，并相应地设置:before和:after的样式。您将需要使用span，因为input是被替换的元素，没有可以设置样式的伪造元素。

＆＃13;

＆＃13;

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;
}

＆＃13;

<span><input /></span>

＆＃13;

＆＃13;

＆＃13;

Answer 2

更新了链接

http://jsfiddle.net/4dvkbtpg/10/

css代码：

input {
  border: none;
  border-radius:2px;
  border-bottom: 1px solid #00CCCB;
  padding: 0 12px;
}
input:focus {
  outline: none;
}
span {
  position: relative;
}
span:before,
span:after {
  content: '';
  bottom: -1px;
  height: 5px;
  border-left: 1px solid #00CCCB;
  position: absolute;
}

Answer 3

如果不添加新标记，您可以同时使用border-bottom和linear-gradients，例如

input {

   font           : 50px Arial;
   padding        : 5px 10px;
   border         : 8px transparent solid;
   border-bottom  : 8px #bada5a solid;
   background     : 

      /* 2) this partially overlaps the previous gradient by
       * applying a white background in the middle of the element
       * and leaving at both of the sides the background 1)
       * for the defined tickness 
       */
      linear-gradient(to right, transparent 8px, #fff 8px, 
             #fff calc(100% - 8px), transparent calc(100% - 7px)), 

      /* 1) this defines the offset from top for both the 
       * left and right border 
       */
      linear-gradient(to bottom, #fff 60%, #bada5a 60%);

   background-origin: border-box;
}

Example on Codepen（在Firefox和Chrome上测试）

这超出了你的问题，但在我创建的代码片段中 - 为了代码可重用性 - 一个SASS mixin接受border-color，tickness（在px中）和offset（在{中}作为参数{1}}）从左上角和右上角的顶部。

如果您不使用CSS预处理器，只需在codepen示例中设置参数，然后切换到编译视图，这样就可以获取CSS代码

结果

Answer 4

现在您可以尝试这个

.inputsec{
  position: relative;
  display: inline-block;
  vertical-align: top;
  border-bottom: solid 2px #00CCCB;
}
.inputsec:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  top: 50%;
  border-left: solid 2px #00CCCB;
}
.inputsec:before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  top: 50%;
  border-right: solid 2px #00CCCB;
}


.inputsec > input {
  display: block;
  margin: 1px 8px 4px 8px;
  border: none;
  background-color: #fff;
  outline:none;
}

<div class="inputsec">
<input type="text" placeholder="Enter your text" />
</div>