1

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

在此处输入图像描述

我试过这样

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

我越来越喜欢，在此处输入图像描述

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

4

5 回答 5

4

你可以试试这个：

<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/

于 2013-07-05T06:10:35.047 回答
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;
}
于 2013-07-05T06:12:20.090 回答
1

这个小提琴有点接近。

// 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;
}
于 2013-07-05T06:20:24.893 回答
1

创建一个您需要底线的背景图像，并将其放在您的课​​堂上作为文本框。我猜它应该可以工作。

于 2013-07-05T06:03:35.950 回答
0

您也可以尝试使用Pseudo element。

于 2013-07-05T06:13:07.703 回答