搜索文本框的CSS样式

Question

我只是想设计我的搜索文本框

我试过这样的事，

border: none;
outline:none;
outline-offset: 0;
border-bottom: 1px solid;
border-color:#33B5E5;
padding:5px;

我很喜欢，

我可以给出边框底部的样式和颜色，我不知道如何在左右两侧设计那条小线。任何人都可以帮助我，提前谢谢

Answer 1

你可以试试这个：

<div class="inputWrapper">
<input type="text">
</div>

和css：

    .inputWrapper {
  border-bottom: solid 1px #009999;
  border-left: solid 1px #009999;
  border-right: solid 1px #009999;
  overflow: visible;
  max-height: 2px;
  display: inline-block;
  padding: 2px;
}
input {
  outline: none;
  border: none;
  background: transparent;
  padding-bottom: 3px;
  position: relative;
  bottom: 5px;
}

这个想法基本上是用一个包装器包装输入，它将包含你的风格。这是小提琴：http://jsfiddle.net/jBq4u/3/

Answer 2

在这里：http://codepen.io/anon/pen/rjlJv

<强> HTML

<div id="container">
   <input type="text" id="something" />
</div>

<强> CSS

#container {
  background-color: grey;
  display: inline-body;
  padding: 10px;
  width: 13%;
}

#something {
  border: none;
  outline:none;
  outline-offset: 0;
  border-bottom: 1px solid;
  border-color:#33B5E5;
  padding:10px;
  background-color: grey;
}

Answer 3

创建一个背景图像，就像你需要底线并放在你的课程中的文本框。它应该可以工作。

Answer 4

这fiddle有点接近。

// HTML
<span class="l">&nbsp;</span>
<input type="textbox" id="tb"/>
<span class="r">&nbsp;</span>

// CSS
#tb{
    border: none;
outline:none;
outline-offset: 0;
border-bottom: 1px solid;
border-color:#33B5E5;
padding:5px;
    border-right : solid 1px #33B5E5;
    border-left : solid 1px #33B5E5;
}

span.l{
    position:relative;
    left : 10px;
    top:-2px;
    background-color:white;
}

span.r{
    position:relative;
    left : -10px;
    top:-2px;
    background-color:white;
}

Answer 5

您也可以尝试使用Pseudo element。