用CSS输入的自定义样式 [英] Custom style for input with CSS

问题描述

我有这样的输入设计：

但是用我的风格，我做不到。

我的CSS：

  input.custom [type = text] {
 border：none; 
 border-bottom：1px solid＃00CCCB; 
} 
 
 .custom ::  -  webkit-input-placeholder {
 color：＃727272; 
} 
 
。自定义：-moz-placeholder {/ * Firefox 18- * / 
颜色：＃727272; 
} 
 
 .custom ::  -  moz-placeholder {/ * Firefox 19+ * / 
 color：＃727272; 
} 
 
 .custom：-ms-input-placeholder {
 color：＃727272; 
} 
  

我的HTML：

 < input type =textclass =customplaceholder =Text goes here/> 
  

结果：

如何设置带有下边框的输入和小小的左右边框，就像我的设计中一样？ 您可以将在 span 中输入，并在之前输入： ：相应地在之后。您需要使用 span ，因为 input 是被替换的元素，没有可以设置样式的psuedo元素。

  input {border：none; border-bottom：1px solid＃00CCCB;填充：0 10px;颜色：＃727272; font-size：20px; vertical-align：baseline;} input：focus {outline：none;} span {position：relative; display：inline-block;} span：before，span：after {content：'';显示：块;底部：0; height：15px; border-left：1px solid＃00CCCB; position：absolute;} span：after {right：0;}  

< span>< input />< / span>

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?

解决方案

You can wrap the input in a span and style the :before and :after on that accordingly. You will need to use a span as inputs are replaced elements, without psuedo elements you can style.

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>

这篇关于用CSS输入的自定义样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！